@saasicat/ui-vue 0.5.0 → 0.7.0

package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue

@@ -2,21 +2,18 @@
     <div class="mc-admin">
         <div class="mc-admin-head">
             <div style="flex: 1">
-                <div class="mc-admin-title">Marketing-Verwaltung</div>
-                <div class="mc-admin-sub">
-                    Sichtbarkeit, Reihenfolge &amp; Highlight-Badges pro Plan · Edits gehen direkt
-                    live
-                </div>
+                <div class="mc-admin-title">{{ msg.tabs.admin }}</div>
+                <div class="mc-admin-sub">{{ msg.admin.subtitle }}</div>
             </div>
         </div>
 
         <div class="mc-admin-grid">
             <div class="mc-admin-thead">
-                <div>Plan</div>
-                <div>Sichtbar</div>
-                <div>Badge</div>
-                <div>Priorität</div>
-                <div>Highlight</div>
+                <div>{{ msg.admin.colPlan }}</div>
+                <div>{{ msg.admin.colVisible }}</div>
+                <div>{{ msg.admin.colBadge }}</div>
+                <div>{{ msg.admin.colPriority }}</div>
+                <div>{{ msg.admin.colHighlight }}</div>
                 <div></div>
             </div>
 
@@ -45,7 +42,9 @@
                             v-if="row.publishedVersions.length > 1"
                             class="mc-version-tabs"
                             role="tablist"
-                            :aria-label="`Plan-Versionen für ${row.plan.label}`"
+                            :aria-label="
+                                formatMessage(msg.admin.versionTabsLabel, { plan: row.plan.label })
+                            "
                         >
                             <button
                                 v-for="v in row.publishedVersions"
@@ -107,23 +106,23 @@
                     </div>
                     <div class="mc-admin-row-end">
                         <span v-if="!row.liveVersion" class="mc-chip mc-chip--muted">
-                            keine Live-Version
+                            {{ msg.admin.noLiveVersion }}
                         </span>
                         <span v-else-if="!row.m.visible" class="mc-chip mc-chip--muted">
-                            versteckt
+                            {{ msg.admin.hidden }}
                         </span>
                         <span v-else-if="row.m.highlight" class="mc-chip mc-chip--featured">
-                            Featured
+                            {{ msg.admin.featured }}
                         </span>
-                        <span v-else class="mc-chip mc-chip--live">live</span>
+                        <span v-else class="mc-chip mc-chip--live">{{ msg.admin.live }}</span>
                         <button
                             v-if="row.liveVersion"
                             type="button"
                             class="mc-expand-btn"
                             :title="
                                 expandedKey === row.plan.planKey
-                                    ? 'Schließen'
-                                    : 'Teaser, Trial & Top-Features bearbeiten'
+                                    ? common.close
+                                    : msg.admin.expandTitle
                             "
                             @click="$emit('toggle-expand', row)"
                         >
@@ -151,19 +150,27 @@
                         <div class="mc-expand-col">
                             <div class="mc-expand-sec">
                                 <div class="mc-field-head">
-                                    <label class="mc-expand-label">Plan-Name</label>
+                                    <label class="mc-expand-label">
+                                        {{ msg.admin.planNameLabel }}
+                                    </label>
                                     <span
                                         v-if="activeLocale !== defaultLocale"
                                         class="mc-source-hint"
                                     >
                                         {{ defaultLocale.toUpperCase() }}:
-                                        <em>„{{ row.plan.label }}"</em>
+                                        <em>
+                                            {{
+                                                formatMessage(msg.admin.planNameSourceValue, {
+                                                    label: row.plan.label,
+                                                })
+                                            }}
+                                        </em>
                                     </span>
                                 </div>
                                 <div v-if="activeLocale === defaultLocale" class="mc-locked-value">
                                     <span>{{ row.plan.label }}</span>
                                     <span class="mc-locked-hint">
-                                        wird in den Plan-Stammdaten gepflegt
+                                        {{ msg.admin.planNameLocked }}
                                     </span>
                                 </div>
                                 <input
@@ -178,29 +185,31 @@
                                     v-if="activeLocale !== defaultLocale && !row.m.displayLabel"
                                     class="mc-expand-hint"
                                 >
-                                    leer · Fallback auf „{{ row.plan.label }}" wird verwendet
+                                    {{
+                                        formatMessage(msg.admin.planNameFallbackHint, {
+                                            label: row.plan.label,
+                                        })
+                                    }}
                                 </div>
                             </div>
 
                             <div class="mc-expand-sec">
-                                <label class="mc-expand-label">Teaser-Text</label>
+                                <label class="mc-expand-label">{{ msg.admin.teaserLabel }}</label>
                                 <textarea
                                     class="mc-field mc-field--area"
                                     rows="2"
-                                    placeholder="Kurzbeschreibung für die Pricing-Page …"
+                                    :placeholder="msg.admin.teaserPlaceholder"
                                     :value="row.m.description"
                                     :disabled="busy"
                                     @change="
                                         $emit('patch', row, { description: textValue($event) })
                                     "
                                 />
-                                <div class="mc-expand-hint">
-                                    erscheint unter dem Plannamen in der Vorschau
-                                </div>
+                                <div class="mc-expand-hint">{{ msg.admin.teaserHint }}</div>
                             </div>
 
                             <div class="mc-expand-sec">
-                                <label class="mc-expand-label">Kostenlose Testphase</label>
+                                <label class="mc-expand-label">{{ msg.admin.trialLabel }}</label>
                                 <div class="mc-trial-row">
                                     <label class="mc-toggle">
                                         <input
@@ -216,7 +225,11 @@
                                         <span />
                                     </label>
                                     <span class="mc-trial-label">
-                                        {{ row.m.trialEnabled ? 'Trial aktiv' : 'Kein Trial' }}
+                                        {{
+                                            row.m.trialEnabled
+                                                ? msg.admin.trialOn
+                                                : msg.admin.trialOff
+                                        }}
                                     </span>
                                     <span class="mc-trial-days">
                                         <input
@@ -233,19 +246,18 @@
                                                 })
                                             "
                                         />
-                                        <span class="mc-trial-unit">Tage</span>
+                                        <span class="mc-trial-unit">
+                                            {{ msg.admin.trialDaysUnit }}
+                                        </span>
                                     </span>
                                 </div>
-                                <div class="mc-expand-hint">
-                                    CTA-Text generiert sich automatisch („Jetzt
-                                    {{ row.m.trialDays }} Tage testen“).
-                                </div>
+                                <div class="mc-expand-hint">{{ trialCtaHint(row) }}</div>
                             </div>
 
                             <div class="mc-expand-sec">
-                                <label class="mc-expand-label"
-                                    >CTA-Text überschreiben (optional)</label
-                                >
+                                <label class="mc-expand-label">
+                                    {{ msg.admin.ctaOverrideLabel }}
+                                </label>
                                 <input
                                     class="mc-field"
                                     :placeholder="autoCtaText(row)"
@@ -257,7 +269,7 @@
                                         })
                                     "
                                 />
-                                <div class="mc-expand-hint">leer lassen für Auto-Text</div>
+                                <div class="mc-expand-hint">{{ msg.admin.ctaOverrideHint }}</div>
                             </div>
                         </div>
 
@@ -265,10 +277,14 @@
                             <div class="mc-expand-sec">
                                 <div class="mc-tf-head">
                                     <label class="mc-expand-label" style="margin: 0">
-                                        Top-Features
+                                        {{ msg.topFeatures }}
                                     </label>
                                     <span class="mc-expand-hint" style="margin-left: auto">
-                                        {{ editFeatures.length }} Einträge
+                                        {{
+                                            formatMessage(msg.admin.topFeatureCount, {
+                                                count: editFeatures.length,
+                                            })
+                                        }}
                                     </span>
                                 </div>
 
@@ -280,7 +296,7 @@
                                             :placeholder="
                                                 f.key
                                                     ? resolveComponentLabel(f.key)
-                                                    : 'z. B. Beitragsverwaltung'
+                                                    : msg.admin.featureLabelPlaceholder
                                             "
                                             :value="f.label"
                                             :disabled="busy"
@@ -291,7 +307,7 @@
                                         />
                                         <input
                                             class="mc-field mc-tf-strong"
-                                            placeholder="Highlight, z. B. bis 100"
+                                            :placeholder="msg.admin.featureStrongPlaceholder"
                                             :value="f.strong"
                                             :disabled="busy"
                                             @input="
@@ -303,7 +319,7 @@
                                             <button
                                                 type="button"
                                                 class="mc-iconbtn"
-                                                title="Nach oben"
+                                                :title="msg.admin.moveUp"
                                                 :disabled="i === 0 || busy"
                                                 @click="$emit('move-feature', row, i, -1)"
                                             >
@@ -312,7 +328,7 @@
                                             <button
                                                 type="button"
                                                 class="mc-iconbtn"
-                                                title="Nach unten"
+                                                :title="msg.admin.moveDown"
                                                 :disabled="i === editFeatures.length - 1 || busy"
                                                 @click="$emit('move-feature', row, i, 1)"
                                             >
@@ -321,7 +337,7 @@
                                             <button
                                                 type="button"
                                                 class="mc-iconbtn mc-iconbtn--danger"
-                                                title="Entfernen"
+                                                :title="common.remove"
                                                 :disabled="busy"
                                                 @click="$emit('remove-feature', row, i)"
                                             >
@@ -339,8 +355,7 @@
                                         </div>
                                     </div>
                                     <div v-if="editFeatures.length === 0" class="mc-tf-empty">
-                                        Noch keine Top-Features — füge Plan-Komponenten oder freien
-                                        Text hinzu.
+                                        {{ msg.admin.topFeaturesEmpty }}
                                     </div>
                                 </div>
 
@@ -361,20 +376,26 @@
                                         >
                                             <path d="M12 5v14M5 12h14" />
                                         </svg>
-                                        <span>Eigener Eintrag</span>
+                                        <span>{{ msg.admin.addCustomFeature }}</span>
                                     </button>
                                     <div
                                         v-if="suggestionsFor(row).length > 0"
                                         class="mc-tf-suggestions"
                                     >
-                                        <span class="mc-expand-hint">aus Plan-Komponenten:</span>
+                                        <span class="mc-expand-hint">
+                                            {{ msg.admin.suggestionsLabel }}
+                                        </span>
                                         <button
                                             v-for="(s, i) in suggestionsFor(row)"
                                             :key="i"
                                             type="button"
                                             class="mc-tf-chip"
                                             :disabled="busy"
-                                            :title="`„${s.label}“ als Top-Feature übernehmen`"
+                                            :title="
+                                                formatMessage(msg.admin.addSuggestionTitle, {
+                                                    label: s.label,
+                                                })
+                                            "
                                             @click="$emit('add-suggestion', row, s)"
                                         >
                                             <svg
@@ -403,6 +424,8 @@
 
 <script setup lang="ts">
 import type { MarketingTopFeature, PlanRow, PlanVersionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { FeatureSuggestion, MarketingRow, ResolvedMarketing } from './types.js';
 
 defineProps<{
@@ -434,6 +457,15 @@ defineEmits<{
     (e: 'add-suggestion', row: MarketingRow, suggestion: FeatureSuggestion): void;
 }>();
 
+const msg = useSaMessages('marketing');
+const common = useSaMessages('common');
+
+/** Hint below the trial toggle — shows the auto CTA text for the set trial days. */
+function trialCtaHint(row: MarketingRow): string {
+    const cta = formatMessage(msg.value.cta.trial, { days: row.m.trialDays });
+    return formatMessage(msg.value.admin.ctaAutoHint, { cta });
+}
+
 function textValue(event: Event): string {
     return (event.target as HTMLInputElement | HTMLTextAreaElement | null)?.value ?? '';
 }

package/src/pages-standard/marketing-catalog/MarketingCatalogHeader.vue

@@ -1,15 +1,12 @@
 <template>
     <div class="mc-page-head">
         <div>
-            <h2 class="mc-h-title">Marketing-Catalog</h2>
-            <p class="mc-h-sub">
-                Öffentliche Marketing-Projektion · gefilterte Sicht für Website, Pricing-Page und
-                Checkout
-            </p>
+            <h2 class="mc-h-title">{{ msg.header.title }}</h2>
+            <p class="mc-h-sub">{{ msg.header.subtitle }}</p>
         </div>
         <div class="mc-head-actions">
             <div class="mc-locale-mgr">
-                <span class="mc-locale-mgr-label">Sprachen:</span>
+                <span class="mc-locale-mgr-label">{{ msg.header.localesLabel }}</span>
                 <span
                     v-for="loc in activeLocaleSet"
                     :key="loc"
@@ -22,13 +19,15 @@
                         @click="$emit('localeChange', loc)"
                     >
                         {{ loc.toUpperCase() }}
-                        <span v-if="loc === defaultLocale" title="Default-Sprache">★</span>
+                        <span v-if="loc === defaultLocale" :title="msg.header.defaultLocale"
+                            >★</span
+                        >
                     </button>
                     <button
                         v-if="loc !== defaultLocale"
                         type="button"
                         class="mc-locale-x"
-                        title="Sprache deaktivieren"
+                        :title="msg.header.deactivateLocale"
                         @click="$emit('removeLocale', loc)"
                     >
                         ×
@@ -41,7 +40,7 @@
                         :disabled="addableLocales.length === 0"
                         @click="$emit('update:localePickerOpen', !localePickerOpen)"
                     >
-                        + Sprache
+                        {{ msg.header.addLocale }}
                     </button>
                     <div v-if="localePickerOpen" class="mc-locale-picker">
                         <button
@@ -67,13 +66,15 @@
                 >
                     <path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6" />
                 </svg>
-                <span>Aktualisieren</span>
+                <span>{{ msg.header.refresh }}</span>
             </button>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+
 defineProps<{
     activeLocaleSet: string[];
     activeLocale: string;
@@ -90,4 +91,6 @@ defineEmits<{
     (e: 'update:localePickerOpen', value: boolean): void;
     (e: 'reload'): void;
 }>();
+
+const msg = useSaMessages('marketing');
 </script>

package/src/pages-standard/marketing-catalog/MarketingCatalogPreview.vue

@@ -7,15 +7,13 @@
             <div class="mc-chrome-url">{{ previewUrl }}</div>
         </div>
         <div class="mc-canvas">
-            <div class="mc-eyebrow">Preise &amp; Pakete</div>
-            <h1 class="mc-hero">Der passende Plan</h1>
-            <p class="mc-sub">
-                Flexibel skalieren, jederzeit upgraden. Kein Setup-Fee, monatlich kündbar.
-            </p>
+            <div class="mc-eyebrow">{{ msg.preview.eyebrow }}</div>
+            <h1 class="mc-hero">{{ msg.preview.hero }}</h1>
+            <p class="mc-sub">{{ msg.preview.sub }}</p>
 
             <div v-if="visibleRows.length === 0" class="mc-banner mc-banner--info">
-                Kein Plan ist aktuell für den Public-Catalog sichtbar. Aktiviere die Sichtbarkeit im
-                Tab <strong>Marketing-Verwaltung</strong>.
+                {{ msg.preview.emptyBefore }} <strong>{{ msg.tabs.admin }}</strong
+                >{{ msg.preview.emptyAfter }}
             </div>
 
             <div v-else class="mc-grid">
@@ -49,42 +47,46 @@
                         </template>
                         <template v-else-if="!row.liveVersion">
                             <span class="mc-card-price-big" style="font-size: 22px">
-                                Auf Anfrage
+                                {{ msg.preview.priceOnRequest }}
                             </span>
                         </template>
                         <template v-else-if="promoResultOf(row)">
                             <span class="mc-card-price-big">
                                 {{ formatEuro(promoResultOf(row)?.discounted ?? 0) }}
                             </span>
-                            <span class="mc-card-price-unit">/ Monat</span>
+                            <span class="mc-card-price-unit">{{ msg.preview.perMonth }}</span>
                         </template>
                         <template v-else>
                             <span class="mc-card-price-big">
                                 {{ formatEuro(monthlyOf(row)) }}
                             </span>
-                            <span class="mc-card-price-unit">/ Monat</span>
+                            <span class="mc-card-price-unit">{{ msg.preview.perMonth }}</span>
                         </template>
                     </div>
                     <div v-if="promoResultOf(row)" class="mc-card-price-strike">
                         <s>{{ formatEuro(promoResultOf(row)?.original ?? 0) }}</s>
-                        <span class="mc-price-regular">regulär</span>
+                        <span class="mc-price-regular">{{ msg.preview.regularPrice }}</span>
                     </div>
                     <div
                         v-else-if="row.liveVersion && yearlyOf(row) > 0 && !row.m.priceTag"
                         class="mc-card-price-y"
                     >
-                        oder {{ formatEuro(yearlyOf(row)) }} jährlich
+                        {{
+                            formatMessage(msg.preview.orYearly, {
+                                price: formatEuro(yearlyOf(row)),
+                            })
+                        }}
                     </div>
 
                     <button type="button" class="mc-card-cta">{{ ctaText(row) }}</button>
                     <div v-if="showTrialNote(row) && !promoOf(row)" class="mc-card-trialnote">
-                        {{ row.m.trialDays }} Tage kostenlos · keine Kreditkarte nötig
+                        {{ formatMessage(msg.preview.trialNote, { days: row.m.trialDays }) }}
                     </div>
                     <div v-if="promoFineprintOf(row)" class="mc-card-fineprint">
                         {{ promoFineprintOf(row) }}
                     </div>
 
-                    <div class="mc-card-includes">Top-Features</div>
+                    <div class="mc-card-includes">{{ msg.topFeatures }}</div>
                     <ul v-if="row.m.topFeatures.length > 0" class="mc-card-features">
                         <li v-for="(f, i) in row.m.topFeatures" :key="i">
                             <span class="mc-tick">
@@ -105,7 +107,9 @@
                             </span>
                         </li>
                     </ul>
-                    <div v-else class="mc-card-features-empty">Keine Top-Features gepflegt.</div>
+                    <div v-else class="mc-card-features-empty">
+                        {{ msg.preview.noTopFeatures }}
+                    </div>
                 </div>
             </div>
         </div>
@@ -113,11 +117,9 @@
 </template>
 
 <script setup lang="ts">
-import type {
-    MarketingTopFeature,
-    PromotionResult,
-    PromotionRow,
-} from '@saasicat/types';
+import type { MarketingTopFeature, PromotionResult, PromotionRow } from '@saasicat/types';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { MarketingRow } from './types.js';
 
 defineProps<{
@@ -135,4 +137,6 @@ defineProps<{
     showTrialNote: (row: MarketingRow) => boolean;
     topFeatureLabel: (feature: MarketingTopFeature) => string;
 }>();
+
+const msg = useSaMessages('marketing');
 </script>

package/src/pages-standard/marketing-catalog/MarketingCatalogToolbar.vue

@@ -7,7 +7,7 @@
                 :class="{ active: tab === 'preview' }"
                 @click="$emit('update:tab', 'preview')"
             >
-                Public-Catalog Vorschau
+                {{ msg.tabs.preview }}
             </button>
             <button
                 type="button"
@@ -15,7 +15,7 @@
                 :class="{ active: tab === 'admin' }"
                 @click="$emit('update:tab', 'admin')"
             >
-                Marketing-Verwaltung
+                {{ msg.tabs.admin }}
             </button>
             <button
                 type="button"
@@ -23,7 +23,7 @@
                 :class="{ active: tab === 'promos' }"
                 @click="$emit('update:tab', 'promos')"
             >
-                Aktionen
+                {{ msg.tabs.promos }}
                 <span v-if="activePromoCount > 0" class="mc-tab-count">
                     {{ activePromoCount }}
                 </span>
@@ -43,6 +43,7 @@
 </template>
 
 <script setup lang="ts">
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { MarketingCatalogTab } from './types.js';
 
 defineProps<{
@@ -55,4 +56,6 @@ defineProps<{
 defineEmits<{
     (e: 'update:tab', tab: MarketingCatalogTab): void;
 }>();
+
+const msg = useSaMessages('marketing');
 </script>

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

@@ -6,7 +6,7 @@
                 {{ title }}
                 <span v-if="versionNew" class="sa-pv-diff-card__ver">v{{ versionNew }}</span>
             </div>
-            <div class="sa-pv-diff-card__sub">Keine Änderungen</div>
+            <div class="sa-pv-diff-card__sub">{{ common.noChanges }}</div>
         </div>
     </div>
     <div v-else class="sa-pv-diff-card">
@@ -27,9 +27,7 @@
             <span v-else-if="versionOld != null" class="sa-pv-diff-card__ver"
                 >− v{{ versionOld }}</span
             >
-            <span class="sa-pv-diff-card__count">
-                {{ changes.length }} Änderung{{ changes.length !== 1 ? 'en' : '' }}
-            </span>
+            <span class="sa-pv-diff-card__count">{{ changeCountLabel }}</span>
         </header>
         <div class="sa-pv-diff-card__body">
             <VersionDiffPreview :changes="changes" :field-labels="fieldLabels" />
@@ -38,10 +36,13 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { VersionChange } from '@saasicat/types';
-import VersionDiffPreview from './VersionDiffPreview.vue';
+import { formatMessage } from '../../client/i18n/format.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
+import VersionDiffPreview from '../../components/VersionDiffPreview.vue';
 
-defineProps<{
+const props = defineProps<{
     title: string;
     versionOld: number | null;
     versionNew: number | null;
@@ -49,6 +50,15 @@ defineProps<{
     changes: VersionChange[];
     fieldLabels?: Record<string, string>;
 }>();
+
+const msg = useSaMessages('planVersions');
+const common = useSaMessages('common');
+
+const changeCountLabel = computed(() => {
+    const count = props.changes.length;
+    const template = count === 1 ? msg.value.diff.changeCountOne : msg.value.diff.changeCountMany;
+    return formatMessage(template, { count });
+});
 </script>
 
 <style scoped>