@saasicat/ui-vue 0.2.0

package/src/components/plan-version-editor/PlanCatalogPreview.vue

@@ -0,0 +1,184 @@
+<template>
+    <section class="pve-col pve-preview">
+        <div class="pve-col-header pve-col-header--preview">
+            <div>
+                <div class="pve-col-title">Live-Vorschau · Public-Catalog</div>
+                <div class="pve-col-sub">So sehen Interessenten den Plan</div>
+            </div>
+            <div class="pve-preview-toggle">
+                <button
+                    type="button"
+                    :class="[
+                        'pve-btn pve-btn--sm',
+                        { 'pve-btn--ghost': previewMode !== 'desktop' },
+                    ]"
+                    @click="$emit('update:previewMode', 'desktop')"
+                >
+                    Desktop
+                </button>
+                <button
+                    type="button"
+                    :class="['pve-btn pve-btn--sm', { 'pve-btn--ghost': previewMode !== 'mobile' }]"
+                    @click="$emit('update:previewMode', 'mobile')"
+                >
+                    Mobil
+                </button>
+            </div>
+        </div>
+
+        <div class="pve-prev-window" :class="`pve-prev-window--${previewMode}`">
+            <div class="pve-prev-chrome">
+                <span class="pve-prev-dot" style="background: #ef4444" />
+                <span class="pve-prev-dot" style="background: #f59e0b" />
+                <span class="pve-prev-dot" style="background: #10b981" />
+                <div class="pve-prev-url">{{ catalogUrl }}</div>
+            </div>
+            <div class="pve-prev-body">
+                <div class="pve-prev-eyebrow">Unsere Pläne · Vorschau Draft v{{ version }}</div>
+                <div class="pve-prev-title">{{ planDisplayName }}</div>
+                <div class="pve-prev-desc">
+                    {{ changeNote || 'Plan-Beschreibung wird aus der Change-Note generiert.' }}
+                </div>
+                <div class="pve-prev-price">
+                    <span class="pve-prev-price-big">{{ formattedMonthly }}</span>
+                    <span class="pve-prev-price-unit">/ Monat</span>
+                </div>
+                <div v-if="yearlySavingsLabel" class="pve-prev-price-yearly">
+                    oder {{ formattedYearly }} / Jahr · {{ yearlySavingsLabel }}
+                </div>
+
+                <button type="button" class="pve-prev-cta">Jetzt 30 Tage testen</button>
+
+                <div class="pve-prev-sep">Enthalten</div>
+                <ul class="pve-prev-list">
+                    <li v-for="row in selectedQuotaList" :key="`pq-${row.quotaKey}`">
+                        <span class="pve-prev-tick" aria-hidden="true">
+                            <svg
+                                width="10"
+                                height="10"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="3"
+                            >
+                                <path d="M5 13l4 4L19 7" />
+                            </svg>
+                        </span>
+                        <b>{{ quotas[row.quotaKey] }}</b>
+                        {{ (row.unit || row.label).toLowerCase() }}
+                    </li>
+                    <li v-for="key in sortedSelectedFeatures" :key="`pf-${key}`">
+                        <span class="pve-prev-tick" aria-hidden="true">
+                            <svg
+                                width="10"
+                                height="10"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="3"
+                            >
+                                <path d="M5 13l4 4L19 7" />
+                            </svg>
+                        </span>
+                        {{ featureLabel(key) }}
+                    </li>
+                    <li
+                        v-if="sortedSelectedFeatures.length === 0 && selectedQuotaList.length === 0"
+                        class="pve-prev-empty"
+                    >
+                        Noch keine Inhalte zugewiesen.
+                    </li>
+                </ul>
+
+                <div class="pve-prev-foot">
+                    Marketing-Catalog ·
+                    <code class="pve-mono pve-mono--xs">{{ planKey }}@v{{ version }}</code>
+                    <template v-if="changeNote">
+                        · Change-Note „{{ changeNote }}" wird bei Publish veröffentlicht.
+                    </template>
+                </div>
+            </div>
+        </div>
+
+        <div class="pve-prev-validate">
+            <div class="pve-prev-validate-head">
+                <span class="pve-prev-validate-tick" aria-hidden="true">
+                    <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="3"
+                    >
+                        <path d="M5 13l4 4L19 7" />
+                    </svg>
+                </span>
+                <span class="pve-prev-validate-title">Publish-Checkliste</span>
+                <span class="pve-prev-validate-count"
+                    >{{ checklistOkCount }} / {{ checklist.length }} ok</span
+                >
+            </div>
+            <div
+                v-for="item in checklist"
+                :key="item.id"
+                :class="['pve-vchk', item.ok ? 'pve-vchk--ok' : 'pve-vchk--warn']"
+            >
+                <span aria-hidden="true">
+                    <svg
+                        v-if="item.ok"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="3"
+                    >
+                        <path d="M5 13l4 4L19 7" />
+                    </svg>
+                    <svg
+                        v-else
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path
+                            d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+                        />
+                        <path d="M12 9v4M12 17h.01" />
+                    </svg>
+                </span>
+                <span v-html="item.label" />
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type { ChecklistItem, PreviewMode, SelectedQuotaRow } from './types.js';
+
+defineProps<{
+    previewMode: PreviewMode;
+    catalogUrl: string;
+    planKey: string;
+    version: number;
+    changeNote: string;
+    quotas: Record<string, number>;
+    planDisplayName: string;
+    formattedMonthly: string;
+    formattedYearly: string;
+    yearlySavingsLabel: string | null;
+    selectedQuotaList: SelectedQuotaRow[];
+    sortedSelectedFeatures: string[];
+    checklist: ChecklistItem[];
+    checklistOkCount: number;
+    featureLabel: (key: string) => string;
+}>();
+
+defineEmits<{
+    (e: 'update:previewMode', value: PreviewMode): void;
+}>();
+</script>

package/src/components/plan-version-editor/PlanComponentPool.vue

@@ -0,0 +1,272 @@
+<template>
+    <section class="pve-col pve-pool">
+        <div class="pve-col-header">
+            <div>
+                <div class="pve-col-title">Komponenten</div>
+                <div class="pve-col-sub">Aus der Library in den Plan-Korb ziehen</div>
+            </div>
+        </div>
+        <div class="pve-search">
+            <span class="pve-search-ico" aria-hidden="true">
+                <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <circle cx="11" cy="11" r="7" />
+                    <path d="M21 21l-4.35-4.35" />
+                </svg>
+            </span>
+            <input
+                :value="searchTerm"
+                placeholder="In allen Komponenten suchen…"
+                @input="updateSearchTerm"
+            />
+            <span class="pve-kbd">⌘ K</span>
+        </div>
+        <div class="pve-tabs" role="tablist">
+            <button
+                v-for="tab in poolTabs"
+                :key="tab.id"
+                type="button"
+                role="tab"
+                :class="['pve-tab', { 'pve-tab--active': activeTab === tab.id }]"
+                @click="$emit('update:activeTab', tab.id)"
+            >
+                {{ tab.label }}
+                <span class="pve-tab-count">{{ tab.count }}</span>
+            </button>
+        </div>
+        <div class="pve-pool-list">
+            <template v-if="activeTab === 'features'">
+                <template v-for="grp in filteredFeatureGroups" :key="grp.key">
+                    <div class="pve-pool-group">{{ grp.label }}</div>
+                    <div
+                        v-for="f in grp.rows"
+                        :key="f.featureKey"
+                        class="pve-pool-card"
+                        :class="{ 'pve-pool-card--selected': isFeatureOn(f.featureKey) }"
+                        draggable="true"
+                        @click="$emit('toggle-feature', f.featureKey, !isFeatureOn(f.featureKey))"
+                        @dragstart="$emit('drag-start', 'feature', f.featureKey, $event)"
+                        @dragend="$emit('drag-end')"
+                    >
+                        <span class="pve-pool-grip" aria-hidden="true">
+                            <svg
+                                width="14"
+                                height="14"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                            >
+                                <circle cx="9" cy="6" r="1.5" fill="currentColor" />
+                                <circle cx="15" cy="6" r="1.5" fill="currentColor" />
+                                <circle cx="9" cy="12" r="1.5" fill="currentColor" />
+                                <circle cx="15" cy="12" r="1.5" fill="currentColor" />
+                                <circle cx="9" cy="18" r="1.5" fill="currentColor" />
+                                <circle cx="15" cy="18" r="1.5" fill="currentColor" />
+                            </svg>
+                        </span>
+                        <div class="pve-pool-card-main">
+                            <div class="pve-pool-card-row">
+                                <span class="pve-pool-card-label">{{
+                                    featureLabel(f.featureKey)
+                                }}</span>
+                                <span
+                                    v-if="isFeatureOn(f.featureKey)"
+                                    class="pve-pool-card-check"
+                                    aria-hidden="true"
+                                >
+                                    <svg
+                                        width="12"
+                                        height="12"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="3"
+                                    >
+                                        <path d="M5 13l4 4L19 7" />
+                                    </svg>
+                                </span>
+                            </div>
+                            <div class="pve-pool-card-meta">
+                                <code class="pve-pool-card-key">{{ f.featureKey }}</code>
+                                <span class="pve-pool-card-dot">·</span>
+                                <span>{{ featureGroupLabel(f.featureKey) }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <div v-if="filteredFeatureGroups.length === 0" class="pve-empty">
+                    Keine Features im Discovery-Snapshot.
+                </div>
+            </template>
+
+            <template v-else-if="activeTab === 'quotas'">
+                <div
+                    v-for="q in filteredQuotas"
+                    :key="q.quotaKey"
+                    class="pve-pool-card"
+                    :class="{ 'pve-pool-card--selected': isQuotaOn(q.quotaKey) }"
+                    draggable="true"
+                    @click="$emit('pool-quota-click', q)"
+                    @dragstart="$emit('drag-start', 'quota', q.quotaKey, $event)"
+                    @dragend="$emit('drag-end')"
+                >
+                    <span class="pve-pool-grip" aria-hidden="true">
+                        <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                        >
+                            <circle cx="9" cy="6" r="1.5" fill="currentColor" />
+                            <circle cx="15" cy="6" r="1.5" fill="currentColor" />
+                            <circle cx="9" cy="12" r="1.5" fill="currentColor" />
+                            <circle cx="15" cy="12" r="1.5" fill="currentColor" />
+                            <circle cx="9" cy="18" r="1.5" fill="currentColor" />
+                            <circle cx="15" cy="18" r="1.5" fill="currentColor" />
+                        </svg>
+                    </span>
+                    <div class="pve-pool-card-main">
+                        <div class="pve-pool-card-row">
+                            <span class="pve-pool-card-label">{{ q.label || q.quotaKey }}</span>
+                            <span
+                                v-if="isQuotaOn(q.quotaKey)"
+                                class="pve-pool-card-check"
+                                aria-hidden="true"
+                            >
+                                <svg
+                                    width="12"
+                                    height="12"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                >
+                                    <path d="M5 13l4 4L19 7" />
+                                </svg>
+                            </span>
+                        </div>
+                        <div class="pve-pool-card-meta">
+                            <code class="pve-pool-card-key">{{ q.quotaKey }}</code>
+                            <template v-if="q.unit">
+                                <span class="pve-pool-card-dot">·</span>
+                                <span>{{ q.unit }}</span>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="filteredQuotas.length === 0" class="pve-empty">
+                    Keine Quotas im Discovery-Snapshot.
+                </div>
+            </template>
+
+            <template v-else>
+                <div
+                    v-for="b in filteredBundles"
+                    :key="b.bundleKey"
+                    class="pve-pool-card"
+                    :class="{
+                        'pve-pool-card--selected': isBundleFullyOn(b),
+                        'pve-pool-card--partial': isBundlePartiallyOn(b),
+                    }"
+                    draggable="true"
+                    @click="$emit('toggle-bundle', b, !isBundleFullyOn(b))"
+                    @dragstart="$emit('drag-start', 'bundle', b.bundleKey, $event)"
+                    @dragend="$emit('drag-end')"
+                >
+                    <span class="pve-pool-grip" aria-hidden="true">
+                        <svg
+                            width="14"
+                            height="14"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                        >
+                            <circle cx="9" cy="6" r="1.5" fill="currentColor" />
+                            <circle cx="15" cy="6" r="1.5" fill="currentColor" />
+                            <circle cx="9" cy="12" r="1.5" fill="currentColor" />
+                            <circle cx="15" cy="12" r="1.5" fill="currentColor" />
+                            <circle cx="9" cy="18" r="1.5" fill="currentColor" />
+                            <circle cx="15" cy="18" r="1.5" fill="currentColor" />
+                        </svg>
+                    </span>
+                    <div class="pve-pool-card-main">
+                        <div class="pve-pool-card-row">
+                            <span class="pve-pool-card-label">{{ b.label || b.bundleKey }}</span>
+                            <span
+                                v-if="isBundleFullyOn(b)"
+                                class="pve-pool-card-check"
+                                aria-hidden="true"
+                            >
+                                <svg
+                                    width="12"
+                                    height="12"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="3"
+                                >
+                                    <path d="M5 13l4 4L19 7" />
+                                </svg>
+                            </span>
+                        </div>
+                        <div class="pve-pool-card-meta">
+                            <code class="pve-pool-card-key">{{ b.bundleKey }}</code>
+                            <span class="pve-pool-card-dot">·</span>
+                            <span>{{ b.features.length }} Feature(s)</span>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="filteredBundles.length === 0" class="pve-empty">
+                    Keine published Bundles im Catalog.
+                </div>
+            </template>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts">
+import type {
+    BundleEntry,
+    DiscoveryQuota,
+    FeatureGroup,
+    PoolKind,
+    PoolTab,
+    PoolTabItem,
+} from './types.js';
+
+defineProps<{
+    searchTerm: string;
+    activeTab: PoolTab;
+    poolTabs: PoolTabItem[];
+    filteredFeatureGroups: FeatureGroup[];
+    filteredQuotas: DiscoveryQuota[];
+    filteredBundles: BundleEntry[];
+    featureLabel: (key: string) => string;
+    featureGroupLabel: (key: string) => string;
+    isFeatureOn: (key: string) => boolean;
+    isQuotaOn: (key: string) => boolean;
+    isBundleFullyOn: (bundle: BundleEntry) => boolean;
+    isBundlePartiallyOn: (bundle: BundleEntry) => boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:searchTerm', value: string): void;
+    (e: 'update:activeTab', value: PoolTab): void;
+    (e: 'toggle-feature', key: string, on: boolean): void;
+    (e: 'pool-quota-click', quota: DiscoveryQuota): void;
+    (e: 'toggle-bundle', bundle: BundleEntry, on: boolean): void;
+    (e: 'drag-start', kind: PoolKind, key: string, event: DragEvent): void;
+    (e: 'drag-end'): void;
+}>();
+
+function updateSearchTerm(event: Event): void {
+    emit('update:searchTerm', (event.target as HTMLInputElement | null)?.value ?? '');
+}
+</script>