@el7ven/cookie-kit 0.2.17 → 0.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@el7ven/cookie-kit",
-  "version": "0.2.17",
+  "version": "0.2.19",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",

package/src/vue/CookieConsent.vue

@@ -24,42 +24,33 @@
 
 <script setup>
 import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
-import { useCookieKit } from './index.js'
+import { useCookieKitVue, DEFAULT_CONFIG } from './index.js'
 import CookieDrawer from './CookieDrawer.vue'
 
 // Props for customization
 const props = defineProps({
   config: {
     type: Object,
-    default: () => ({
-      categories: {
-        necessary: { required: true, enabled: true, name: 'Essential Cookies' },
-        analytics: { required: false, enabled: true, name: 'Analytics Cookies' },
-        marketing: { required: false, enabled: false, name: 'Marketing Cookies' }
-      },
-      consentExpireDays: 365,
-      version: '0.2.0',
-      theme: 'light'
-    })
+    default: () => DEFAULT_CONFIG
   }
 })
 
-// Use the new composable
+// Use the Vue composable
 const {
   consent,
   acceptAll,
   rejectAll,
-  acceptCategory,
-  hasConsent,
+  acceptSelected,
+  hasConsented,
   hasCategoryConsent
-} = useCookieKit(props.config)
+} = useCookieKitVue(props.config)
 
 // Local state
-const isVisible = computed(() => !consent.value?.hasConsented)
+const isVisible = computed(() => !hasConsented.value)
 const isSettingsMode = ref(false)
 const currentTab = ref('privacy')
-const categories = ref(props.config.categories)
-const consentVersion = computed(() => props.config.version || '0.2.0')
+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')
@@ -89,13 +80,11 @@ const closeSettings = () => {
 }
 
 const acceptSelection = () => {
-  // Save current category states
-  Object.keys(categories.value).forEach(id => {
-    const isEnabled = categories.value[id]?.enabled
-    if (isEnabled !== undefined) {
-      acceptCategory(id, isEnabled)
-    }
-  })
+  // Get selected category IDs
+  const selectedIds = Object.keys(categories.value)
+    .filter(id => categories.value[id]?.enabled)
+  
+  acceptSelected(selectedIds)
 }
 
 const selectTab = (tabId) => {

package/src/vue/composables/useCookieConsent.js

@@ -4,9 +4,10 @@ export function useCookieConsent(config = {}) {
   const isVisible = ref(false)
   const isSettingsMode = ref(false)
   const currentTab = ref('categories')
-  const consentVersion = ref('1.0.0')
+  const consentVersion = ref(config.consentVersion || '1.0.0')
   
-  const categories = ref({
+  // Use config categories or default
+  const categories = ref(config.categories || {
     necessary: { 
       required: true, 
       enabled: true, 
@@ -35,17 +36,19 @@ export function useCookieConsent(config = {}) {
     canCustomize: true
   })
   
-  const isV2 = ref(true)
+  const isV2 = ref(consentVersion.value === 'v2')
   
   const hasConsent = computed(() => {
     return localStorage.getItem('cookie-consent') !== null
   })
   
-  const consentData = computed(() => {
+  const consent = computed(() => {
     const stored = localStorage.getItem('cookie-consent')
     return stored ? JSON.parse(stored) : null
   })
   
+  const consentData = computed(() => consent.value)
+  
   const showConsent = () => {
     isVisible.value = true
   }
@@ -54,6 +57,10 @@ export function useCookieConsent(config = {}) {
     isVisible.value = false
   }
   
+  const showSettings = () => {
+    isSettingsMode.value = true
+  }
+  
   const openSettings = () => {
     isSettingsMode.value = true
   }
@@ -62,10 +69,19 @@ export function useCookieConsent(config = {}) {
     isSettingsMode.value = false
   }
   
+  const close = () => {
+    isVisible.value = false
+    isSettingsMode.value = false
+  }
+  
   const selectTab = (tab) => {
     currentTab.value = tab
   }
   
+  const setTab = (tab) => {
+    currentTab.value = tab
+  }
+  
   const toggleCategory = (categoryName, enabled) => {
     if (categories.value[categoryName] && !categories.value[categoryName].required) {
       categories.value[categoryName].enabled = enabled
@@ -73,7 +89,7 @@ export function useCookieConsent(config = {}) {
   }
   
   const acceptSelection = () => {
-    const consent = {
+    const consentRecord = {
       version: consentVersion.value,
       timestamp: new Date().toISOString(),
       categories: Object.keys(categories.value).reduce((acc, key) => {
@@ -82,7 +98,7 @@ export function useCookieConsent(config = {}) {
       }, {})
     }
     
-    localStorage.setItem('cookie-consent', JSON.stringify(consent))
+    localStorage.setItem('cookie-consent', JSON.stringify(consentRecord))
     capabilities.value.hasConsented = true
     hideConsent()
     closeSettings()
@@ -104,6 +120,10 @@ export function useCookieConsent(config = {}) {
     acceptSelection()
   }
   
+  const acceptSelected = () => {
+    acceptSelection()
+  }
+  
   const resetConsent = () => {
     localStorage.removeItem('cookie-consent')
     capabilities.value.hasConsented = false
@@ -114,6 +134,33 @@ export function useCookieConsent(config = {}) {
     })
   }
   
+  // Focus trap functions
+  let activeElement = null
+  
+  const activateFocusTrap = (element) => {
+    if (!element) return
+    
+    activeElement = document.activeElement
+    const focusableElements = element.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+    
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus()
+    }
+  }
+  
+  const deactivateFocusTrap = () => {
+    if (activeElement && activeElement.focus) {
+      activeElement.focus()
+    }
+    activeElement = null
+  }
+  
+  const cleanup = () => {
+    deactivateFocusTrap()
+  }
+  
   const handleClose = () => {
     hideConsent()
     closeSettings()
@@ -151,6 +198,10 @@ export function useCookieConsent(config = {}) {
     }
   })
   
+  onUnmounted(() => {
+    cleanup()
+  })
+  
   return {
     isVisible,
     isSettingsMode,
@@ -160,17 +211,25 @@ export function useCookieConsent(config = {}) {
     isV2,
     consentVersion,
     hasConsent,
+    consent,
     consentData,
     showConsent,
     hideConsent,
+    showSettings,
     openSettings,
     closeSettings,
+    close,
     selectTab,
+    setTab,
     toggleCategory,
     acceptSelection,
     acceptAll,
     rejectAll,
+    acceptSelected,
     resetConsent,
+    activateFocusTrap,
+    deactivateFocusTrap,
+    cleanup,
     handleClose,
     handleOpenSettings,
     handleSelectTab,