Docker Compose with 24+ services: - PostgreSQL (PostGIS), Valkey, MinIO, Qdrant - Vault (PKI/TLS), Nginx (Reverse Proxy) - Backend Core API, Consent Service, Billing Service - RAG Service, Embedding Service - Gitea, Woodpecker CI/CD - Night Scheduler, Health Aggregator - Jitsi (Web/XMPP/JVB/Jicofo), Mailpit Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
484 lines
13 KiB
TypeScript
484 lines
13 KiB
TypeScript
import * as vue from 'vue';
|
|
import { InjectionKey, Ref, PropType } from 'vue';
|
|
|
|
/**
|
|
* Consent SDK Types
|
|
*
|
|
* DSGVO/TTDSG-konforme Typdefinitionen für das Consent Management System.
|
|
*/
|
|
/**
|
|
* Standard-Consent-Kategorien nach IAB TCF 2.2
|
|
*/
|
|
type ConsentCategory = 'essential' | 'functional' | 'analytics' | 'marketing' | 'social';
|
|
/**
|
|
* Consent-Status pro Kategorie
|
|
*/
|
|
type ConsentCategories = Record<ConsentCategory, boolean>;
|
|
/**
|
|
* Consent-Status pro Vendor
|
|
*/
|
|
type ConsentVendors = Record<string, boolean>;
|
|
/**
|
|
* Aktueller Consent-Zustand
|
|
*/
|
|
interface ConsentState {
|
|
/** Consent pro Kategorie */
|
|
categories: ConsentCategories;
|
|
/** Consent pro Vendor (optional, für granulare Kontrolle) */
|
|
vendors: ConsentVendors;
|
|
/** Zeitstempel der letzten Aenderung */
|
|
timestamp: string;
|
|
/** SDK-Version bei Erstellung */
|
|
version: string;
|
|
/** Eindeutige Consent-ID vom Backend */
|
|
consentId?: string;
|
|
/** Ablaufdatum */
|
|
expiresAt?: string;
|
|
/** IAB TCF String (falls aktiviert) */
|
|
tcfString?: string;
|
|
}
|
|
/**
|
|
* Minimaler Consent-Input fuer setConsent()
|
|
*/
|
|
type ConsentInput = Partial<ConsentCategories> | {
|
|
categories?: Partial<ConsentCategories>;
|
|
vendors?: ConsentVendors;
|
|
};
|
|
/**
|
|
* UI-Position des Banners
|
|
*/
|
|
type BannerPosition = 'bottom' | 'top' | 'center';
|
|
/**
|
|
* Banner-Layout
|
|
*/
|
|
type BannerLayout = 'bar' | 'modal' | 'floating';
|
|
/**
|
|
* Farbschema
|
|
*/
|
|
type BannerTheme = 'light' | 'dark' | 'auto';
|
|
/**
|
|
* UI-Konfiguration
|
|
*/
|
|
interface ConsentUIConfig {
|
|
/** Position des Banners */
|
|
position?: BannerPosition;
|
|
/** Layout-Typ */
|
|
layout?: BannerLayout;
|
|
/** Farbschema */
|
|
theme?: BannerTheme;
|
|
/** Pfad zu Custom CSS */
|
|
customCss?: string;
|
|
/** z-index fuer Banner */
|
|
zIndex?: number;
|
|
/** Scroll blockieren bei Modal */
|
|
blockScrollOnModal?: boolean;
|
|
/** Custom Container-ID */
|
|
containerId?: string;
|
|
}
|
|
/**
|
|
* Consent-Verhaltens-Konfiguration
|
|
*/
|
|
interface ConsentBehaviorConfig {
|
|
/** Muss Nutzer interagieren? */
|
|
required?: boolean;
|
|
/** "Alle ablehnen" Button sichtbar */
|
|
rejectAllVisible?: boolean;
|
|
/** "Alle akzeptieren" Button sichtbar */
|
|
acceptAllVisible?: boolean;
|
|
/** Einzelne Kategorien waehlbar */
|
|
granularControl?: boolean;
|
|
/** Einzelne Vendors waehlbar */
|
|
vendorControl?: boolean;
|
|
/** Auswahl speichern */
|
|
rememberChoice?: boolean;
|
|
/** Speicherdauer in Tagen */
|
|
rememberDays?: number;
|
|
/** Nur in EU anzeigen (Geo-Targeting) */
|
|
geoTargeting?: boolean;
|
|
/** Erneut nachfragen nach X Tagen */
|
|
recheckAfterDays?: number;
|
|
}
|
|
/**
|
|
* TCF 2.2 Konfiguration
|
|
*/
|
|
interface TCFConfig {
|
|
/** TCF aktivieren */
|
|
enabled?: boolean;
|
|
/** CMP ID */
|
|
cmpId?: number;
|
|
/** CMP Version */
|
|
cmpVersion?: number;
|
|
}
|
|
/**
|
|
* PWA-spezifische Konfiguration
|
|
*/
|
|
interface PWAConfig {
|
|
/** Offline-Unterstuetzung aktivieren */
|
|
offlineSupport?: boolean;
|
|
/** Bei Reconnect synchronisieren */
|
|
syncOnReconnect?: boolean;
|
|
/** Cache-Strategie */
|
|
cacheStrategy?: 'stale-while-revalidate' | 'network-first' | 'cache-first';
|
|
}
|
|
/**
|
|
* Haupt-Konfiguration fuer ConsentManager
|
|
*/
|
|
interface ConsentConfig {
|
|
/** API-Endpunkt fuer Consent-Backend */
|
|
apiEndpoint: string;
|
|
/** Site-ID */
|
|
siteId: string;
|
|
/** Sprache (ISO 639-1) */
|
|
language?: string;
|
|
/** Fallback-Sprache */
|
|
fallbackLanguage?: string;
|
|
/** UI-Konfiguration */
|
|
ui?: ConsentUIConfig;
|
|
/** Consent-Verhaltens-Konfiguration */
|
|
consent?: ConsentBehaviorConfig;
|
|
/** Aktive Kategorien */
|
|
categories?: ConsentCategory[];
|
|
/** TCF 2.2 Konfiguration */
|
|
tcf?: TCFConfig;
|
|
/** PWA-Konfiguration */
|
|
pwa?: PWAConfig;
|
|
/** Callback bei Consent-Aenderung */
|
|
onConsentChange?: (consent: ConsentState) => void;
|
|
/** Callback wenn Banner angezeigt wird */
|
|
onBannerShow?: () => void;
|
|
/** Callback wenn Banner geschlossen wird */
|
|
onBannerHide?: () => void;
|
|
/** Callback bei Fehler */
|
|
onError?: (error: Error) => void;
|
|
/** Debug-Modus aktivieren */
|
|
debug?: boolean;
|
|
}
|
|
/**
|
|
* Event-Typen
|
|
*/
|
|
type ConsentEventType = 'init' | 'change' | 'accept_all' | 'reject_all' | 'save_selection' | 'banner_show' | 'banner_hide' | 'settings_open' | 'settings_close' | 'vendor_enable' | 'vendor_disable' | 'error';
|
|
/**
|
|
* Event-Listener Callback
|
|
*/
|
|
type ConsentEventCallback<T = unknown> = (data: T) => void;
|
|
/**
|
|
* Event-Daten fuer verschiedene Events
|
|
*/
|
|
type ConsentEventData = {
|
|
init: ConsentState | null;
|
|
change: ConsentState;
|
|
accept_all: ConsentState;
|
|
reject_all: ConsentState;
|
|
save_selection: ConsentState;
|
|
banner_show: undefined;
|
|
banner_hide: undefined;
|
|
settings_open: undefined;
|
|
settings_close: undefined;
|
|
vendor_enable: string;
|
|
vendor_disable: string;
|
|
error: Error;
|
|
};
|
|
|
|
/**
|
|
* ConsentManager - Hauptklasse fuer das Consent Management
|
|
*
|
|
* DSGVO/TTDSG-konformes Consent Management fuer Web, PWA und Mobile.
|
|
*/
|
|
|
|
/**
|
|
* ConsentManager - Zentrale Klasse fuer Consent-Verwaltung
|
|
*/
|
|
declare class ConsentManager {
|
|
private config;
|
|
private storage;
|
|
private scriptBlocker;
|
|
private api;
|
|
private events;
|
|
private currentConsent;
|
|
private initialized;
|
|
private bannerVisible;
|
|
private deviceFingerprint;
|
|
constructor(config: ConsentConfig);
|
|
/**
|
|
* SDK initialisieren
|
|
*/
|
|
init(): Promise<void>;
|
|
/**
|
|
* Pruefen ob Consent fuer Kategorie vorhanden
|
|
*/
|
|
hasConsent(category: ConsentCategory): boolean;
|
|
/**
|
|
* Pruefen ob Consent fuer Vendor vorhanden
|
|
*/
|
|
hasVendorConsent(vendorId: string): boolean;
|
|
/**
|
|
* Aktuellen Consent-State abrufen
|
|
*/
|
|
getConsent(): ConsentState | null;
|
|
/**
|
|
* Consent setzen
|
|
*/
|
|
setConsent(input: ConsentInput): Promise<void>;
|
|
/**
|
|
* Alle Kategorien akzeptieren
|
|
*/
|
|
acceptAll(): Promise<void>;
|
|
/**
|
|
* Alle nicht-essentiellen Kategorien ablehnen
|
|
*/
|
|
rejectAll(): Promise<void>;
|
|
/**
|
|
* Alle Einwilligungen widerrufen
|
|
*/
|
|
revokeAll(): Promise<void>;
|
|
/**
|
|
* Consent-Daten exportieren (DSGVO Art. 20)
|
|
*/
|
|
exportConsent(): Promise<string>;
|
|
/**
|
|
* Pruefen ob Consent-Abfrage noetig
|
|
*/
|
|
needsConsent(): boolean;
|
|
/**
|
|
* Banner anzeigen
|
|
*/
|
|
showBanner(): void;
|
|
/**
|
|
* Banner verstecken
|
|
*/
|
|
hideBanner(): void;
|
|
/**
|
|
* Einstellungs-Modal oeffnen
|
|
*/
|
|
showSettings(): void;
|
|
/**
|
|
* Pruefen ob Banner sichtbar
|
|
*/
|
|
isBannerVisible(): boolean;
|
|
/**
|
|
* Event-Listener registrieren
|
|
*/
|
|
on<T extends ConsentEventType>(event: T, callback: ConsentEventCallback<ConsentEventData[T]>): () => void;
|
|
/**
|
|
* Event-Listener entfernen
|
|
*/
|
|
off<T extends ConsentEventType>(event: T, callback: ConsentEventCallback<ConsentEventData[T]>): void;
|
|
/**
|
|
* Konfiguration zusammenfuehren
|
|
*/
|
|
private mergeConfig;
|
|
/**
|
|
* Consent-Input normalisieren
|
|
*/
|
|
private normalizeConsentInput;
|
|
/**
|
|
* Consent anwenden (Skripte aktivieren/blockieren)
|
|
*/
|
|
private applyConsent;
|
|
/**
|
|
* Google Consent Mode v2 aktualisieren
|
|
*/
|
|
private updateGoogleConsentMode;
|
|
/**
|
|
* Pruefen ob Consent abgelaufen
|
|
*/
|
|
private isConsentExpired;
|
|
/**
|
|
* Event emittieren
|
|
*/
|
|
private emit;
|
|
/**
|
|
* Fehler behandeln
|
|
*/
|
|
private handleError;
|
|
/**
|
|
* Debug-Logging
|
|
*/
|
|
private log;
|
|
/**
|
|
* SDK-Version abrufen
|
|
*/
|
|
static getVersion(): string;
|
|
}
|
|
|
|
declare const CONSENT_KEY: InjectionKey<ConsentContext>;
|
|
interface ConsentContext {
|
|
manager: Ref<ConsentManager | null>;
|
|
consent: Ref<ConsentState | null>;
|
|
isInitialized: Ref<boolean>;
|
|
isLoading: Ref<boolean>;
|
|
isBannerVisible: Ref<boolean>;
|
|
needsConsent: Ref<boolean>;
|
|
hasConsent: (category: ConsentCategory) => boolean;
|
|
acceptAll: () => Promise<void>;
|
|
rejectAll: () => Promise<void>;
|
|
saveSelection: (categories: Partial<ConsentCategories>) => Promise<void>;
|
|
showBanner: () => void;
|
|
hideBanner: () => void;
|
|
showSettings: () => void;
|
|
}
|
|
/**
|
|
* Haupt-Composable fuer Consent-Zugriff
|
|
*
|
|
* @example
|
|
* ```vue
|
|
* <script setup>
|
|
* const { hasConsent, acceptAll } = useConsent();
|
|
*
|
|
* if (hasConsent('analytics')) {
|
|
* // Analytics laden
|
|
* }
|
|
* </script>
|
|
* ```
|
|
*/
|
|
declare function useConsent(): ConsentContext;
|
|
/**
|
|
* Consent-Provider einrichten (in App.vue aufrufen)
|
|
*
|
|
* @example
|
|
* ```vue
|
|
* <script setup>
|
|
* import { provideConsent } from '@breakpilot/consent-sdk/vue';
|
|
*
|
|
* provideConsent({
|
|
* apiEndpoint: 'https://consent.example.com/api/v1',
|
|
* siteId: 'site_abc123',
|
|
* });
|
|
* </script>
|
|
* ```
|
|
*/
|
|
declare function provideConsent(config: ConsentConfig): ConsentContext;
|
|
/**
|
|
* ConsentProvider - Wrapper-Komponente
|
|
*
|
|
* @example
|
|
* ```vue
|
|
* <ConsentProvider :config="config">
|
|
* <App />
|
|
* </ConsentProvider>
|
|
* ```
|
|
*/
|
|
declare const ConsentProvider: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
config: {
|
|
type: PropType<ConsentConfig>;
|
|
required: true;
|
|
};
|
|
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
[key: string]: any;
|
|
}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
config: {
|
|
type: PropType<ConsentConfig>;
|
|
required: true;
|
|
};
|
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
/**
|
|
* ConsentGate - Zeigt Inhalt nur bei Consent
|
|
*
|
|
* @example
|
|
* ```vue
|
|
* <ConsentGate category="analytics">
|
|
* <template #default>
|
|
* <AnalyticsComponent />
|
|
* </template>
|
|
* <template #placeholder>
|
|
* <p>Bitte akzeptieren Sie Statistik-Cookies.</p>
|
|
* </template>
|
|
* </ConsentGate>
|
|
* ```
|
|
*/
|
|
declare const ConsentGate: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
category: {
|
|
type: PropType<ConsentCategory>;
|
|
required: true;
|
|
};
|
|
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
[key: string]: any;
|
|
}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
category: {
|
|
type: PropType<ConsentCategory>;
|
|
required: true;
|
|
};
|
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
/**
|
|
* ConsentPlaceholder - Placeholder fuer blockierten Inhalt
|
|
*
|
|
* @example
|
|
* ```vue
|
|
* <ConsentPlaceholder category="marketing" />
|
|
* ```
|
|
*/
|
|
declare const ConsentPlaceholder: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
category: {
|
|
type: PropType<ConsentCategory>;
|
|
required: true;
|
|
};
|
|
message: {
|
|
type: StringConstructor;
|
|
default: string;
|
|
};
|
|
buttonText: {
|
|
type: StringConstructor;
|
|
default: string;
|
|
};
|
|
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
[key: string]: any;
|
|
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
category: {
|
|
type: PropType<ConsentCategory>;
|
|
required: true;
|
|
};
|
|
message: {
|
|
type: StringConstructor;
|
|
default: string;
|
|
};
|
|
buttonText: {
|
|
type: StringConstructor;
|
|
default: string;
|
|
};
|
|
}>> & Readonly<{}>, {
|
|
message: string;
|
|
buttonText: string;
|
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
/**
|
|
* ConsentBanner - Cookie-Banner Komponente
|
|
*
|
|
* @example
|
|
* ```vue
|
|
* <ConsentBanner>
|
|
* <template #default="{ isVisible, onAcceptAll, onRejectAll, onShowSettings }">
|
|
* <div v-if="isVisible" class="my-banner">
|
|
* <button @click="onAcceptAll">Accept</button>
|
|
* <button @click="onRejectAll">Reject</button>
|
|
* </div>
|
|
* </template>
|
|
* </ConsentBanner>
|
|
* ```
|
|
*/
|
|
declare const ConsentBanner: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
[key: string]: any;
|
|
}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
[key: string]: any;
|
|
}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
/**
|
|
* Vue Plugin fuer globale Installation
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* import { createApp } from 'vue';
|
|
* import { ConsentPlugin } from '@breakpilot/consent-sdk/vue';
|
|
*
|
|
* const app = createApp(App);
|
|
* app.use(ConsentPlugin, {
|
|
* apiEndpoint: 'https://consent.example.com/api/v1',
|
|
* siteId: 'site_abc123',
|
|
* });
|
|
* ```
|
|
*/
|
|
declare const ConsentPlugin: {
|
|
install(app: {
|
|
provide: (key: symbol | string, value: unknown) => void;
|
|
}, config: ConsentConfig): void;
|
|
};
|
|
|
|
export { CONSENT_KEY, ConsentBanner, type ConsentContext, ConsentGate, ConsentPlaceholder, ConsentPlugin, ConsentProvider, provideConsent, useConsent };
|