@el7ven/cookie-kit 0.2.20 → 0.3.1

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.disabled && !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>