@el7ven/cookie-kit 0.2.20 → 0.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@el7ven/cookie-kit",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -11,8 +11,10 @@
     "./dist/styles": "./dist/styles/index.css",
     "./react": "./src/react/index.js",
     "./vue": "./src/vue/index.js",
-    "./src/composables/useCookieConsent": "./src/vue/composables/useCookieConsent.js",
+    "./analytics": "./src/core/analytics.js",
+    "./config": "./src/core/index.js",
     "./composables/useCookieConsent": "./src/vue/composables/useCookieConsent.js",
+    "./src/composables/useCookieConsent": "./src/vue/composables/useCookieConsent.js",
     "./package.json": "./package.json"
   },
   "files": [

package/src/core/analytics.js

@@ -0,0 +1,220 @@
+/**
+ * @el7ven/cookie-kit - Analytics Integration Module
+ * Google Consent Mode v2, GTM, GA4, Meta Pixel, Yandex Metrica
+ */
+
+/**
+ * Initialize Google Consent Mode v2 with default denied state
+ */
+export function initGoogleConsentMode() {
+  if (typeof window === 'undefined') return
+
+  window.dataLayer = window.dataLayer || []
+  window.gtag = window.gtag || function gtag() { window.dataLayer.push(arguments) }
+
+  // Set default consent state - all denied until user consents
+  window.gtag('consent', 'default', {
+    ad_storage: 'denied',
+    ad_user_data: 'denied',
+    ad_personalization: 'denied',
+    analytics_storage: 'denied',
+    functionality_storage: 'denied',
+    personalization_storage: 'denied',
+    security_storage: 'granted' // Always granted for security
+  })
+}
+
+/**
+ * Update Google Consent Mode based on cookie consent categories
+ * @param {Object} categories - { analytics: true, marketing: false, preferences: true }
+ */
+export function updateGoogleConsent(categories = {}) {
+  if (typeof window === 'undefined' || !window.gtag) return
+
+  const consentUpdate = {
+    analytics_storage: categories.analytics ? 'granted' : 'denied',
+    ad_storage: categories.marketing ? 'granted' : 'denied',
+    ad_user_data: categories.marketing ? 'granted' : 'denied',
+    ad_personalization: categories.marketing ? 'granted' : 'denied',
+    functionality_storage: categories.preferences ? 'granted' : 'denied',
+    personalization_storage: categories.preferences ? 'granted' : 'denied',
+    security_storage: 'granted'
+  }
+
+  window.gtag('consent', 'update', consentUpdate)
+}
+
+/**
+ * Load Google Tag Manager
+ * @param {string} gtmId - GTM container ID (e.g., 'GTM-XXXXX')
+ */
+export function loadGTM(gtmId) {
+  if (!gtmId || typeof document === 'undefined') return
+
+  const script = document.createElement('script')
+  script.async = true
+  script.src = `https://www.googletagmanager.com/gtm.js?id=${gtmId}`
+  document.head.appendChild(script)
+
+  window.dataLayer = window.dataLayer || []
+  window.dataLayer.push({
+    'gtm.start': new Date().getTime(),
+    event: 'gtm.js'
+  })
+}
+
+/**
+ * Load Google Analytics 4
+ * @param {string} ga4Id - GA4 measurement ID (e.g., 'G-XXXXX')
+ */
+export function loadGA4(ga4Id) {
+  if (!ga4Id || typeof document === 'undefined') return
+
+  const script = document.createElement('script')
+  script.async = true
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${ga4Id}`
+  document.head.appendChild(script)
+
+  window.dataLayer = window.dataLayer || []
+  window.gtag = window.gtag || function gtag() { window.dataLayer.push(arguments) }
+  window.gtag('js', new Date())
+  window.gtag('config', ga4Id)
+}
+
+/**
+ * Load Meta (Facebook) Pixel
+ * @param {string} pixelId - Meta Pixel ID
+ */
+export function loadMetaPixel(pixelId) {
+  if (!pixelId || typeof window === 'undefined') return
+
+  /* eslint-disable */
+  !function(f,b,e,v,n,t,s)
+  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  t.src=v;s=b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t,s)}(window, document,'script',
+  'https://connect.facebook.net/en_US/fbevents.js');
+  /* eslint-enable */
+
+  window.fbq('init', pixelId)
+  window.fbq('track', 'PageView')
+}
+
+/**
+ * Load Yandex Metrica
+ * @param {string} counterId - Yandex Metrica counter ID
+ */
+export function loadYandexMetrica(counterId) {
+  if (!counterId || typeof document === 'undefined') return
+
+  /* eslint-disable */
+  (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+  m[i].l=1*new Date();
+  for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+  k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+  (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+  /* eslint-enable */
+
+  window.ym(counterId, 'init', {
+    clickmap: true,
+    trackLinks: true,
+    accurateTrackBounce: true,
+    webvisor: true
+  })
+}
+
+/**
+ * Block/unblock scripts based on consent categories
+ * Scripts with data-cookie-category attribute will be managed
+ * @param {Object} categories - { analytics: true, marketing: false }
+ */
+export function manageScriptBlocking(categories = {}) {
+  if (typeof document === 'undefined') return
+
+  document.querySelectorAll('script[data-cookie-category]').forEach(script => {
+    const category = script.getAttribute('data-cookie-category')
+    if (categories[category]) {
+      // Re-enable script
+      if (script.type === 'text/plain' && script.dataset.originalSrc) {
+        const newScript = document.createElement('script')
+        newScript.src = script.dataset.originalSrc
+        newScript.async = true
+        script.parentNode.replaceChild(newScript, script)
+      }
+    }
+  })
+}
+
+/**
+ * Create analytics manager that auto-integrates with cookie consent
+ * @param {Object} config - { ga4: 'G-XXX', gtm: 'GTM-XXX', metaPixel: 'XXX', yandexMetrica: 'XXX' }
+ * @returns {Object} Analytics manager instance
+ */
+export function createAnalyticsManager(config = {}) {
+  let initialized = false
+
+  const init = () => {
+    if (initialized) return
+    initialized = true
+
+    // Always init Google Consent Mode first (denied by default)
+    initGoogleConsentMode()
+
+    // Load GTM if configured (it respects consent mode)
+    if (config.gtm) loadGTM(config.gtm)
+  }
+
+  const onConsentUpdate = (categories = {}) => {
+    // Update Google Consent Mode
+    updateGoogleConsent(categories)
+
+    // Load analytics scripts based on consent
+    if (categories.analytics) {
+      if (config.ga4) loadGA4(config.ga4)
+      if (config.yandexMetrica) loadYandexMetrica(config.yandexMetrica)
+    }
+
+    if (categories.marketing) {
+      if (config.metaPixel) loadMetaPixel(config.metaPixel)
+    }
+
+    // Manage script blocking
+    manageScriptBlocking(categories)
+  }
+
+  const connectToCookieConsent = () => {
+    if (typeof window === 'undefined') return
+
+    // Wait for CookieConsent to be available
+    const checkInterval = setInterval(() => {
+      if (window.CookieConsent) {
+        clearInterval(checkInterval)
+
+        // Check if consent already given
+        const currentConsent = window.CookieConsent.getConsent()
+        if (currentConsent?.categories) {
+          onConsentUpdate(currentConsent.categories)
+        }
+
+        // Listen for future changes
+        window.CookieConsent.on('consentChanged', ({ consent }) => {
+          if (consent?.categories) {
+            onConsentUpdate(consent.categories)
+          }
+        })
+      }
+    }, 100)
+
+    // Stop checking after 10 seconds
+    setTimeout(() => clearInterval(checkInterval), 10000)
+  }
+
+  return {
+    init,
+    onConsentUpdate,
+    connectToCookieConsent
+  }
+}

package/src/index.js

@@ -8,8 +8,12 @@
 // Core functionality
 export { createCookieKit, CookieKitCore, DEFAULT_CONFIG } from './core/index.js'
 
+// Analytics integration
+export { createAnalyticsManager, initGoogleConsentMode, updateGoogleConsent, loadGTM, loadGA4, loadMetaPixel, loadYandexMetrica, manageScriptBlocking } from './core/analytics.js'
+
 // Import for default export
 import { createCookieKit, CookieKitCore, DEFAULT_CONFIG } from './core/index.js'
+import { createAnalyticsManager } from './core/analytics.js'
 import { initCookieKit } from './js/index.js'
 import { VERSION } from './core/version.js'
 
@@ -62,6 +66,7 @@ export function autoCookieConsent(config = {}) {
 export default {
   createCookieKit,
   createCookieConsent,
+  createAnalyticsManager,
   autoCookieConsent,
   initCookieKit,
   CookieKitCore,

package/src/vue/CookieConsent.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="cookie-consent" :data-cookie-kit-theme="theme" :style="themeVarsStyle">
-    <!-- Cookie Drawer (Unified Component) -->
     <CookieDrawer
       ref="drawerRef"
       :is-visible="isVisible"
       :is-settings-mode="isSettingsMode"
       :current-tab="currentTab"
       :categories="categories"
-      :config="config"
+      :config="mergedConfig"
       :consent-version="consentVersion"
       :capabilities="capabilities"
       :is-v2="isV2"
@@ -23,88 +22,129 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useCookieKitVue, DEFAULT_CONFIG } from './index.js'
 import CookieDrawer from './CookieDrawer.vue'
 
-// Props for customization
 const props = defineProps({
   config: {
     type: Object,
-    default: () => DEFAULT_CONFIG
+    default: () => ({})
   }
 })
 
-// Use the Vue composable
+const emit = defineEmits(['consentChanged', 'consentCleared'])
+
+// Deep merge user config with defaults
+const mergedConfig = computed(() => deepMerge(DEFAULT_CONFIG, props.config))
+
+// Use the Vue composable with merged config
 const {
+  core,
   consent,
+  categories: coreCategories,
   acceptAll,
   rejectAll,
   acceptSelected,
   hasConsented,
-  hasCategoryConsent
-} = useCookieKitVue(props.config)
+  hasCategoryConsent,
+  resetConsent
+} = useCookieKitVue(mergedConfig.value)
 
-// Local state
-const isVisible = computed(() => !hasConsented.value)
+// Local UI state
+const isVisible = ref(false)
 const isSettingsMode = ref(false)
 const currentTab = ref('privacy')
-const categories = computed(() => consent.value?.categories || props.config.categories)
-const consentVersion = computed(() => props.config.version || '1.0.0')
-const capabilities = computed(() => ({}))
-const isV2 = computed(() => true)
-const theme = computed(() => props.config.theme || 'light')
+const drawerRef = ref(null)
+
+// Category state (reactive, for toggles)
+const categories = ref(buildCategoryState(mergedConfig.value.categories))
+
+// Computed
+const consentVersion = computed(() => mergedConfig.value.version || 'v2')
+const capabilities = computed(() => mergedConfig.value.capabilities || {})
+const isV2 = computed(() => consentVersion.value === 'v2')
+const theme = computed(() => mergedConfig.value.theme || 'light')
 const themeVarsStyle = computed(() => {
-  const vars = props.config.themeVars || {}
+  const vars = mergedConfig.value.themeVars || {}
   return Object.fromEntries(
-    Object.entries(vars).map(([key, value]) => [key.startsWith('--') ? key : `--${key}`, value])
+    Object.entries(vars).map(([k, v]) => [k.startsWith('--') ? k : `--${k}`, v])
   )
 })
-const drawerRef = ref(null)
 
 const enabledSettingsTabs = computed(() => {
-  return Object.keys(props.config.categories || {}).filter(categoryId => {
-    return props.config.categories[categoryId]?.enabled
-  })
+  return Object.keys(mergedConfig.value.categories || {}).filter(id =>
+    mergedConfig.value.categories[id]?.enabled
+  )
 })
 
-const openSettings = () => {
-  isSettingsMode.value = true
-}
-
-const closeSettings = () => {
-  if (consent.value?.hasConsented) {
-    return
+// Show/hide logic
+onMounted(() => {
+  if (!hasConsented.value && mergedConfig.value.autoShow !== false) {
+    isVisible.value = true
   }
-  isSettingsMode.value = false
-}
 
-const acceptSelection = () => {
-  // Get selected category IDs
-  const selectedIds = Object.keys(categories.value)
-    .filter(id => categories.value[id]?.enabled)
-  
-  acceptSelected(selectedIds)
-}
+  // Listen for consent events from core
+  if (core) {
+    core.on('consentChanged', (data) => {
+      emit('consentChanged', data)
+    })
+    core.on('consentCleared', () => {
+      isVisible.value = true
+      emit('consentCleared')
+    })
+  }
 
-const selectTab = (tabId) => {
-  currentTab.value = tabId
-}
+  // Expose global API
+  if (typeof window !== 'undefined' && mergedConfig.value.mountGlobal !== false) {
+    window.CookieConsent = {
+      hasConsent: () => hasConsented.value,
+      hasCategoryConsent: (cat) => hasCategoryConsent(cat),
+      getConsent: () => consent.value,
+      acceptAll: () => handleAcceptAll(),
+      rejectAll: () => handleRejectAll(),
+      acceptSelected: (ids) => acceptSelected(ids),
+      clearConsent: () => { resetConsent(); isVisible.value = true },
+      show: () => { isVisible.value = true },
+      showSettings: () => { isSettingsMode.value = true; isVisible.value = true },
+      on: (event, cb) => core?.on(event, cb),
+      off: (event, cb) => core?.off(event, cb)
+    }
+  }
+})
 
+// Focus trap
 const getDrawerDialogElement = () => {
   const exposed = drawerRef.value?.dialogElement
-  const result = typeof exposed === 'function' ? exposed() : exposed?.value || exposed || null
-  return result
+  return typeof exposed === 'function' ? exposed() : exposed?.value || exposed || null
 }
 
-// Focus trap logic (simplified)
+let previousActiveElement = null
+
 watch(isVisible, async (visible) => {
   if (visible) {
+    previousActiveElement = document.activeElement
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 50))
+    const el = getDrawerDialogElement()
+    if (el) {
+      const focusable = el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+      if (focusable.length) focusable[0].focus()
+    }
+  } else {
+    if (previousActiveElement?.focus) previousActiveElement.focus()
+    previousActiveElement = null
+  }
+})
+
+watch([isSettingsMode, currentTab], async () => {
+  if (isVisible.value) {
     await nextTick()
     await new Promise(resolve => setTimeout(resolve, 50))
-    const dialogElement = getDrawerDialogElement()
-    if (dialogElement && props.config.debug) {
-      console.log('[CookieConsent] Focus trap activated')
+    const el = getDrawerDialogElement()
+    if (el) {
+      const focusable = el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+      if (focusable.length) focusable[0].focus()
     }
   }
 })
@@ -112,58 +152,121 @@ watch(isVisible, async (visible) => {
 // Event handlers
 const handleAcceptAll = () => {
   acceptAll()
+  isVisible.value = false
+  isSettingsMode.value = false
 }
 
 const handleRejectAll = () => {
   rejectAll()
+  isVisible.value = false
+  isSettingsMode.value = false
 }
 
 const handleAcceptSelection = () => {
-  acceptSelection()
+  const mode = mergedConfig.value.mode
+
+  if (mode === 'essential') {
+    handleAcceptAll()
+    return
+  }
+
+  if (!isSettingsMode.value) {
+    const selectedIds = Object.keys(categories.value).filter(id => categories.value[id])
+    acceptSelected(selectedIds)
+    isVisible.value = false
+    return
+  }
+
+  // Settings mode: navigate tabs or save
+  const tabs = enabledSettingsTabs.value
+  if (currentTab.value === 'privacy' && tabs.length) {
+    currentTab.value = tabs[0]
+    return
+  }
+
+  const idx = tabs.indexOf(currentTab.value)
+  if (idx >= 0 && idx < tabs.length - 1) {
+    currentTab.value = tabs[idx + 1]
+    return
+  }
+
+  const selectedIds = Object.keys(categories.value).filter(id => categories.value[id])
+  acceptSelected(selectedIds)
+  isVisible.value = false
+  isSettingsMode.value = false
 }
 
 const handleOpenSettings = () => {
-  openSettings()
+  isSettingsMode.value = true
 }
 
 const handleSelectTab = (tabId) => {
-  selectTab(tabId)
+  currentTab.value = tabId
 }
 
 const handleToggleCategory = (categoryId) => {
-  const current = categories.value[categoryId]
-  if (current) {
-    categories.value[categoryId] = { ...current, enabled: !current.enabled }
+  const cat = mergedConfig.value.categories[categoryId]
+  if (cat && !cat.locked && !cat.required) {
+    categories.value[categoryId] = !categories.value[categoryId]
   }
 }
 
 const handleClose = () => {
   if (isSettingsMode.value) {
-    closeSettings()
+    if (hasConsented.value) {
+      isVisible.value = false
+      isSettingsMode.value = false
+    } else {
+      isSettingsMode.value = false
+    }
+  } else {
+    if (mergedConfig.value.mode === 'essential') {
+      handleAcceptAll()
+    }
   }
 }
 
-// Cleanup on unmount
 onUnmounted(() => {
-  // Add cleanup if needed
+  if (typeof document !== 'undefined') {
+    document.body.style.overflow = ''
+  }
+  if (typeof window !== 'undefined') {
+    delete window.CookieConsent
+  }
 })
 
 // Expose methods for external use
 defineExpose({
   acceptAll: handleAcceptAll,
   rejectAll: handleRejectAll,
-  resetConsent: () => {
-    // Reset logic if needed
-  }
+  resetConsent,
+  show: () => { isVisible.value = true },
+  showSettings: () => { isSettingsMode.value = true; isVisible.value = true }
 })
+
+// Helpers
+function buildCategoryState(cats) {
+  if (!cats) return {}
+  return Object.fromEntries(
+    Object.keys(cats).map(id => [id, !!cats[id].enabled])
+  )
+}
+
+function deepMerge(target, source) {
+  const result = { ...target }
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      result[key] = deepMerge(target[key] || {}, source[key])
+    } else {
+      result[key] = source[key]
+    }
+  }
+  return result
+}
 </script>
 
 <style lang="scss" scoped>
 .cookie-consent {
   position: relative;
-
-  &--has-modal {
-    min-height: 100vh;
-  }
 }
 </style>

package/src/vue/CookieConsentDebug.vue

@@ -0,0 +1,168 @@
+<template>
+  <div v-if="shouldShow" class="cookie-consent-debug">
+    <button 
+      @click="showPanel = !showPanel"
+      class="cookie-consent-debug__button"
+      title="Cookie Consent Debug"
+    >
+      🍪
+    </button>
+    
+    <div v-if="showPanel" class="cookie-consent-debug__panel">
+      <div class="cookie-consent-debug__header">
+        <h4>Cookie Consent Debug</h4>
+        <button @click="showPanel = false" class="cookie-consent-debug__close">&times;</button>
+      </div>
+      <div class="cookie-consent-debug__info">
+        <p><strong>Status:</strong> {{ consentStatus }}</p>
+        <p v-for="(status, cat) in categoryStatuses" :key="cat">
+          <strong>{{ cat }}:</strong> {{ status }}
+        </p>
+      </div>
+      
+      <div class="cookie-consent-debug__actions">
+        <button @click="doAcceptAll" class="cookie-consent-debug__btn cookie-consent-debug__btn--accept">Accept All</button>
+        <button @click="doRejectAll" class="cookie-consent-debug__btn cookie-consent-debug__btn--reject">Reject All</button>
+        <button @click="doClear" class="cookie-consent-debug__btn cookie-consent-debug__btn--clear">Clear</button>
+        <button @click="doShow" class="cookie-consent-debug__btn cookie-consent-debug__btn--show">Show Banner</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  debug: { type: Boolean, default: false },
+  categories: { type: Array, default: () => ['necessary', 'analytics', 'marketing', 'preferences'] }
+})
+
+const showPanel = ref(false)
+
+const shouldShow = computed(() => {
+  if (props.debug) return true
+  if (typeof window === 'undefined') return false
+  const host = window.location?.hostname || ''
+  return host === 'localhost' || host.includes('test') || host.includes('.local')
+})
+
+const consentStatus = computed(() => {
+  return window.CookieConsent?.hasConsent() ? 'Given' : 'Not given'
+})
+
+const categoryStatuses = computed(() => {
+  const result = {}
+  props.categories.forEach(cat => {
+    result[cat] = window.CookieConsent?.hasCategoryConsent(cat) ? 'Enabled' : 'Disabled'
+  })
+  return result
+})
+
+const doAcceptAll = () => window.CookieConsent?.acceptAll()
+const doRejectAll = () => window.CookieConsent?.rejectAll()
+const doClear = () => window.CookieConsent?.clearConsent()
+const doShow = () => window.CookieConsent?.show()
+</script>
+
+<style scoped>
+.cookie-consent-debug {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 10000;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.cookie-consent-debug__button {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #0026aa;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s;
+}
+
+.cookie-consent-debug__button:hover {
+  background: #001d88;
+  transform: scale(1.1);
+}
+
+.cookie-consent-debug__panel {
+  position: absolute;
+  bottom: 50px;
+  right: 0;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 16px;
+  min-width: 250px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.cookie-consent-debug__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.cookie-consent-debug__header h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.cookie-consent-debug__close {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  color: #666;
+  padding: 0 4px;
+}
+
+.cookie-consent-debug__info p {
+  margin: 4px 0;
+  font-size: 12px;
+  color: #666;
+}
+
+.cookie-consent-debug__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.cookie-consent-debug__btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: white;
+}
+
+.cookie-consent-debug__btn--accept { background: #28a745; }
+.cookie-consent-debug__btn--accept:hover { background: #218838; }
+.cookie-consent-debug__btn--reject { background: #dc3545; }
+.cookie-consent-debug__btn--reject:hover { background: #c82333; }
+.cookie-consent-debug__btn--clear { background: #ffc107; color: #212529; }
+.cookie-consent-debug__btn--clear:hover { background: #e0a800; }
+.cookie-consent-debug__btn--show { background: #17a2b8; }
+.cookie-consent-debug__btn--show:hover { background: #138496; }
+
+@media (max-width: 767px) {
+  .cookie-consent-debug { display: none; }
+}
+</style>

package/src/vue/CookieDrawer.vue

@@ -17,17 +17,17 @@
       <div ref="dialogRef" class="cookie-drawer__content" role="dialog" aria-modal="true" @click.stop>
         <!-- Header -->
         <div class="cookie-drawer__header">
-          <h3 class="cookie-drawer__title">
+          <div class="cookie-drawer__title">
             {{ isSettingsMode
               ? (config.texts?.settings?.title || 'Cookie Settings')
               : (config.mode === 'essential'
                 ? (config.texts?.essential?.title || 'Essential Cookies')
                 : (config.texts?.gdpr?.title || 'Cookie Consent'))
             }}
-          </h3>
-            <!-- Message -->
+          </div>
+          <!-- Message -->
           <div v-if="!isSettingsMode && !isEssentialBanner" class="cookie-drawer__message">
-             {{ config.texts?.gdpr?.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.' }}
+            {{ config.texts?.gdpr?.message || 'We use cookies to enhance your experience.' }}
           </div>
 
           <button
@@ -36,9 +36,9 @@
             class="cookie-drawer__close"
             aria-label="Close"
           >
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M6.40013 18.3079L5.69238 17.6001L11.2924 12.0001L5.69238 6.40013L6.40013 5.69238L12.0001 11.2924L17.6001 5.69238L18.3079 6.40013L12.7079 12.0001L18.3079 17.6001L17.6001 18.3079L12.0001 12.7079L6.40013 18.3079Z" fill="#0D0B3D"/>
-              </svg>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M6.40013 18.3079L5.69238 17.6001L11.2924 12.0001L5.69238 6.40013L6.40013 5.69238L12.0001 11.2924L17.6001 5.69238L18.3079 6.40013L12.7079 12.0001L18.3079 17.6001L17.6001 18.3079L12.0001 12.7079L6.40013 18.3079Z" fill="currentColor"/>
+            </svg>
           </button>
         </div>
 
@@ -46,101 +46,191 @@
         <div v-if="!isSettingsMode && isEssentialBanner" class="cookie-drawer__banner">
           <div class="cookie-drawer__essential">
             <div class="cookie-drawer__message cookie-drawer__message--essential">
-              {{ config.texts?.essential?.message || 'We use essential cookies to make our site work. By using our site, you accept our use of essential cookies.' }}
-            </div>
-            <div class="cookie-drawer__actions">
-              <button @click="$emit('acceptAll')" class="cookie-drawer__button cookie-drawer__button--primary">
-                {{ config.texts?.essential?.accept || 'Accept' }}
-              </button>
+              {{ config.texts?.essential?.message || 'This site uses only essential cookies.' }}
             </div>
           </div>
         </div>
 
-        <!-- GDPR Banner/Settings -->
-        <div v-else class="cookie-drawer__body">
-          <!-- Banner Mode -->
-          <div v-if="!isSettingsMode" class="cookie-drawer__banner">
-            <div class="cookie-drawer__message">
-              {{ config.texts?.gdpr?.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.' }}
-            </div>
-            <div class="cookie-drawer__actions">
-              <button @click="$emit('rejectAll')" class="cookie-drawer__button cookie-drawer__button--secondary">
-                {{ config.texts?.gdpr?.reject || 'Reject All' }}
-              </button>
-              <button @click="$emit('acceptAll')" class="cookie-drawer__button cookie-drawer__button--primary">
-                {{ config.texts?.gdpr?.accept || 'Accept All' }}
-              </button>
-              <button @click="$emit('openSettings')" class="cookie-drawer__button cookie-drawer__button--link">
-                {{ config.texts?.gdpr?.settings || 'Customize' }}
-              </button>
+        <!-- GDPR Banner -->
+        <div v-else-if="!isSettingsMode" class="cookie-drawer__banner">
+          <div class="cookie-drawer__gdpr">
+            <!-- Categories -->
+            <div class="cookie-drawer__categories">
+              <div
+                v-for="category in enabledCategories"
+                :key="category.id"
+                class="cookie-drawer__category"
+              >
+                <div class="cookie-drawer__category-header">
+                  <span class="cookie-drawer__category-name">
+                    {{ category.label }}
+                  </span>
+                  <div class="cookie-drawer__toggle">
+                    <input
+                      type="checkbox"
+                      :id="`drawer-category-${category.id}`"
+                      :checked="categories[category.id]"
+                      @change="toggleCategory(category.id)"
+                      :disabled="category.locked"
+                      class="cookie-drawer__toggle-input"
+                    />
+                    <label
+                      :for="`drawer-category-${category.id}`"
+                      :class="[
+                        'cookie-drawer__toggle-label',
+                        { 'cookie-drawer__toggle-label--disabled': category.locked }
+                      ]"
+                    ></label>
+                  </div>
+                </div>
+                <div v-if="category.descriptionShow" class="cookie-drawer__category-description">
+                  {{ category.description }}
+                </div>
+              </div>
             </div>
-          </div>
 
-          <!-- Settings Mode -->
-          <div v-else class="cookie-drawer__settings">
-            <!-- Tabs -->
-            <div v-if="enabledSettingsTabs.length > 1" class="cookie-drawer__tabs">
+            <!-- Settings Link -->
+            <div class="cookie-drawer__settings-link">
               <button
-                v-for="tab in enabledSettingsTabs"
-                :key="tab"
-                :class="['cookie-drawer__tab', { 'cookie-drawer__tab--active': currentTab === tab }]"
-                @click="$emit('selectTab', tab)"
+                @click="openSettings"
+                class="cookie-drawer__settings-button"
               >
-                {{ getCategoryTitle(tab) }}
+                {{ config.texts?.buttons?.settings || config.texts?.gdpr?.buttons?.settings || 'Settings' }}
               </button>
             </div>
 
-            <!-- Tab Content -->
-            <div class="cookie-drawer__tab-content">
-              <div v-if="currentTab === 'privacy'" class="cookie-drawer__privacy">
-                <h4>{{ config.texts?.settings?.privacy?.title || 'Privacy Policy' }}</h4>
-                <p>{{ config.texts?.settings?.privacy?.description || 'Learn about how we use cookies and protect your privacy.' }}</p>
-              </div>
+            <!-- Capabilities -->
+            <div v-if="isV2" class="cookie-drawer__capabilities" aria-live="polite">
+              <span v-if="capabilities.gdpr" class="cookie-drawer__capability">GDPR</span>
+              <span v-if="capabilities.ccpa" class="cookie-drawer__capability">CCPA</span>
+              <span v-if="capabilities.pipeda" class="cookie-drawer__capability">PIPEDA</span>
+              <span v-if="capabilities.iabTcf22" class="cookie-drawer__capability">IAB TCF v2.2</span>
+              <span v-if="capabilities.googleConsentModeV2" class="cookie-drawer__capability">Google Consent Mode v2</span>
+              <span v-if="capabilities.scriptBlocking" class="cookie-drawer__capability">Script Blocking</span>
+            </div>
+          </div>
+        </div>
 
-              <div v-else class="cookie-drawer__category">
-                <div class="cookie-drawer__category-header">
-                  <h4>{{ getCategoryTitle(currentTab) }}</h4>
-                  <label class="cookie-drawer__toggle">
-                    <input
-                      type="checkbox"
-                      :checked="categories[currentTab]?.enabled"
-                      :disabled="categories[currentTab]?.required"
-                      @change="$emit('toggleCategory', currentTab)"
-                    />
-                    <span class="cookie-drawer__toggle-slider"></span>
-                  </label>
-                </div>
-                <div class="cookie-drawer__category-description">
-                  {{ getCategoryDescription(currentTab) }}
+        <!-- Settings Mode -->
+        <div v-else class="cookie-drawer__settings">
+          <!-- Tabs -->
+          <div class="cookie-drawer__tabs">
+            <button
+              v-for="tab in availableTabs"
+              :key="tab.id"
+              @click="selectTab(tab.id)"
+              :class="[
+                'cookie-drawer__tab',
+                { 'cookie-drawer__tab--active': currentTab === tab.id }
+              ]"
+            >
+              {{ tab.label }}
+            </button>
+          </div>
+
+          <!-- Tab Content -->
+          <div class="cookie-drawer__tab-content">
+            <!-- Privacy Tab -->
+            <div v-if="currentTab === 'privacy'" class="cookie-drawer__privacy">
+              <div class="cookie-drawer__privacy-content">
+                <div class="cookie-drawer__text">
+                  {{ config.texts?.settings?.privacy?.intro || 'We use cookies and similar technologies to ensure the site works properly.' }}
                 </div>
+                <a :href="policyLinks.privacy || '#'" class="cookie-drawer__link">
+                  {{ config.texts?.settings?.links?.moreInfo || 'More information' }}
+                </a>
               </div>
             </div>
 
-            <!-- Settings Actions -->
-            <div class="cookie-drawer__settings-actions">
-              <button @click="$emit('acceptSelection')" class="cookie-drawer__button cookie-drawer__button--primary">
-                {{ config.texts?.settings?.save || 'Save Preferences' }}
-              </button>
+            <!-- Category Tabs -->
+            <div v-else class="cookie-drawer__category">
+              <div class="cookie-drawer__category-header">
+                <div class="cookie-drawer__category-title">
+                  {{ currentCategoryData.label }}
+                </div>
+                <div class="cookie-drawer__toggle">
+                  <input
+                    type="checkbox"
+                    :id="`settings-category-${currentTab}`"
+                    :checked="categories[currentTab]"
+                    @change="toggleCategory(currentTab)"
+                    :disabled="currentCategoryData.locked"
+                    class="cookie-drawer__toggle-input"
+                  />
+                  <label
+                    :for="`settings-category-${currentTab}`"
+                    :class="[
+                      'cookie-drawer__toggle-label',
+                      { 'cookie-drawer__toggle-label--disabled': currentCategoryData.locked }
+                    ]"
+                  ></label>
+                </div>
+              </div>
+              <div class="cookie-drawer__category-description">
+                {{ currentCategoryData.description }}
+              </div>
+              <a :href="policyLinks.cookies || '#'" class="cookie-drawer__link">
+                {{ config.texts?.settings?.links?.cookieDetails || 'Cookie details' }}
+              </a>
             </div>
           </div>
         </div>
+
+        <!-- Actions: GDPR mode -->
+        <div v-if="!isEssentialBanner" class="cookie-drawer__actions">
+          <button
+            @click="handleAcceptSelection"
+            class="cookie-drawer__button cookie-drawer__button--outline"
+          >
+            {{ config.texts?.buttons?.acceptSelection || config.texts?.gdpr?.buttons?.acceptSelection || 'Accept Selection' }}
+          </button>
+          <button
+            @click="handleRejectAll"
+            class="cookie-drawer__button cookie-drawer__button--secondary"
+          >
+            {{ config.texts?.buttons?.rejectAll || config.texts?.gdpr?.buttons?.rejectAll || 'Reject All' }}
+          </button>
+          <button
+            @click="handleAcceptAll"
+            class="cookie-drawer__button cookie-drawer__button--primary"
+          >
+            {{ config.texts?.buttons?.acceptAll || config.texts?.gdpr?.buttons?.acceptAll || 'Accept All' }}
+          </button>
+        </div>
+        <!-- Actions: Essential mode -->
+        <div v-else class="cookie-drawer__actions cookie-drawer__actions_essential">
+          <button
+            @click="handleAcceptAll"
+            class="cookie-drawer__button cookie-drawer__button--primary cookie-drawer__button--essential"
+          >
+            {{ config.texts?.essential?.button || 'Accept' }}
+          </button>
+        </div>
+
       </div>
     </div>
   </Transition>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps({
-  isVisible: Boolean,
-  isSettingsMode: Boolean,
-  currentTab: String,
-  categories: Object,
-  config: Object,
-  consentVersion: String,
-  capabilities: Object,
-  isV2: Boolean
+  isVisible: { type: Boolean, required: true },
+  isSettingsMode: { type: Boolean, default: false },
+  currentTab: { type: String, required: true },
+  categories: { type: Object, required: true },
+  config: { type: Object, required: true },
+  consentVersion: { type: String, default: 'v1' },
+  capabilities: { type: Object, default: () => ({}) },
+  isV2: { type: Boolean, default: false }
+})
+
+const dialogRef = ref(null)
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)
+
+defineExpose({
+  dialogElement: () => dialogRef.value
 })
 
 const emit = defineEmits([
@@ -153,51 +243,131 @@ const emit = defineEmits([
   'rejectAll'
 ])
 
-const dialogRef = ref(null)
+// Computed properties
+const enabledCategories = computed(() => {
+  if (!props.config.categories) return []
+  return Object.keys(props.config.categories)
+    .filter(catId => props.config.categories[catId].enabled)
+    .map(catId => props.config.categories[catId])
+})
 
-const isEssentialBanner = computed(() => props.config.mode === 'essential')
+const availableTabs = computed(() => {
+  const tabs = [
+    { id: 'privacy', label: props.config.texts?.settings?.tabs?.privacy || 'Privacy' }
+  ]
 
-const drawerClasses = computed(() => ({
-  'cookie-drawer__content-wrapper--settings': props.isSettingsMode,
-  'cookie-drawer__content-wrapper--banner': !props.isSettingsMode
-}))
+  if (props.config.categories) {
+    Object.keys(props.config.categories).forEach(categoryId => {
+      if (props.config.categories[categoryId].enabled) {
+        tabs.push({
+          id: categoryId,
+          label: props.config.categories[categoryId].label
+        })
+      }
+    })
+  }
 
-const rootClasses = computed(() => ({
-  'cookie-drawer__content-wrapper--bottom': true
-}))
+  return tabs
+})
 
-const drawerAnimation = computed(() => 
-  props.isSettingsMode ? 'drawer-slide-up' : 'banner-slide-up'
-)
+const currentCategoryData = computed(() => {
+  return props.config.categories?.[props.currentTab] || {}
+})
 
-const enabledSettingsTabs = computed(() => {
-  return ['privacy', ...Object.keys(props.categories || {}).filter(id => 
-    props.categories[id]?.enabled
-  )]
+const policyLinks = computed(() => {
+  return props.config.policies || {}
 })
 
-const getCategoryTitle = (categoryId) => {
-  return props.categories[categoryId]?.name || categoryId
-}
+const isEssentialBanner = computed(() => {
+  return props.config.mode === 'essential' && !props.isSettingsMode
+})
 
-const getCategoryDescription = (categoryId) => {
-  return props.categories[categoryId]?.description || `Description for ${categoryId} cookies.`
-}
+// Reactive mobile detection
+const isMobile = computed(() => {
+  return windowWidth.value <= 767
+})
 
-const handleBackdropClick = () => {
-  if (!props.isSettingsMode) {
-    emit('close')
+const handleResize = () => {
+  if (typeof window !== 'undefined') {
+    windowWidth.value = window.innerWidth
   }
 }
 
+onMounted(() => {
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', handleResize)
+  }
+})
+
+onUnmounted(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', handleResize)
+  }
+})
+
+// Root classes for essential mode
+const rootClasses = computed(() => {
+  return {
+    'cookie-drawer--essential-mode': isEssentialBanner.value
+  }
+})
+
+// Drawer classes and animations
+const drawerClasses = computed(() => {
+  return {
+    'cookie-drawer--mobile': isMobile.value && !isEssentialBanner.value
+  }
+})
+
+const drawerAnimation = computed(() => {
+  if (isEssentialBanner.value) return 'drawer-slide-up'
+  if (isMobile.value) return 'drawer-slide-up'
+  return 'drawer-slide-right'
+})
+
+// Event handlers
 const handleClose = () => {
   emit('close')
 }
 
-// Expose dialog element for focus trap
-defineExpose({
-  dialogElement: () => dialogRef.value
-})
+const handleBackdropClick = () => {
+  emit('close')
+}
+
+const openSettings = () => {
+  emit('openSettings')
+}
+
+const selectTab = (tabId) => {
+  emit('selectTab', tabId)
+}
+
+const toggleCategory = (categoryId) => {
+  emit('toggleCategory', categoryId)
+}
+
+const handleAcceptSelection = () => {
+  emit('acceptSelection')
+}
+
+const handleAcceptAll = () => {
+  emit('acceptAll')
+}
+
+const handleRejectAll = () => {
+  emit('rejectAll')
+}
+
+// Watch for drawer visibility to control body overflow
+watch(
+  () => props.isVisible,
+  (newVal) => {
+    if (isEssentialBanner.value) return
+    if (typeof document === 'undefined') return
+    document.body.style.overflow = newVal ? 'hidden' : ''
+  },
+  { immediate: true }
+)
 </script>
 
 <style src="@el7ven/cookie-kit/dist/styles"></style>

package/src/vue/index.js

@@ -2,8 +2,12 @@ import { computed, ref } from 'vue'
 import { createCookieKit, DEFAULT_CONFIG } from '../core/index.js'
 import { VERSION, getVersion, getVersionInfo, logVersion } from './version.js'
 import { useCookieConsent } from './composables/useCookieConsent.js'
+import { createAnalyticsManager } from '../core/analytics.js'
 
-export { createCookieKit, DEFAULT_CONFIG, VERSION, getVersion, getVersionInfo, logVersion, useCookieConsent }
+export { createCookieKit, DEFAULT_CONFIG, VERSION, getVersion, getVersionInfo, logVersion, useCookieConsent, createAnalyticsManager }
+export { default as CookieConsent } from './CookieConsent.vue'
+export { default as CookieDrawer } from './CookieDrawer.vue'
+export { default as CookieConsentDebug } from './CookieConsentDebug.vue'
 
 export function useCookieKitVue(userConfig = {}) {
   const core = createCookieKit(userConfig)