@el7ven/cookie-kit 0.2.15

package/src/vue/CookieConsent.vue

@@ -0,0 +1,180 @@
+<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"
+      :consent-version="consentVersion"
+      :capabilities="capabilities"
+      :is-v2="isV2"
+      @close="handleClose"
+      @open-settings="handleOpenSettings"
+      @select-tab="handleSelectTab"
+      @toggle-category="handleToggleCategory"
+      @accept-selection="handleAcceptSelection"
+      @accept-all="handleAcceptAll"
+      @reject-all="handleRejectAll"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue'
+import { useCookieKit } 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'
+    })
+  }
+})
+
+// Use the new composable
+const {
+  consent,
+  acceptAll,
+  rejectAll,
+  acceptCategory,
+  hasConsent,
+  hasCategoryConsent
+} = useCookieKit(props.config)
+
+// Local state
+const isVisible = computed(() => !consent.value?.hasConsented)
+const isSettingsMode = ref(false)
+const currentTab = ref('privacy')
+const categories = ref(props.config.categories)
+const consentVersion = computed(() => props.config.version || '0.2.0')
+const capabilities = computed(() => ({}))
+const isV2 = computed(() => true)
+const theme = computed(() => props.config.theme || 'light')
+const themeVarsStyle = computed(() => {
+  const vars = props.config.themeVars || {}
+  return Object.fromEntries(
+    Object.entries(vars).map(([key, value]) => [key.startsWith('--') ? key : `--${key}`, value])
+  )
+})
+const drawerRef = ref(null)
+
+const enabledSettingsTabs = computed(() => {
+  return Object.keys(props.config.categories || {}).filter(categoryId => {
+    return props.config.categories[categoryId]?.enabled
+  })
+})
+
+const openSettings = () => {
+  isSettingsMode.value = true
+}
+
+const closeSettings = () => {
+  if (consent.value?.hasConsented) {
+    return
+  }
+  isSettingsMode.value = false
+}
+
+const acceptSelection = () => {
+  // Save current category states
+  Object.keys(categories.value).forEach(id => {
+    const isEnabled = categories.value[id]?.enabled
+    if (isEnabled !== undefined) {
+      acceptCategory(id, isEnabled)
+    }
+  })
+}
+
+const selectTab = (tabId) => {
+  currentTab.value = tabId
+}
+
+const getDrawerDialogElement = () => {
+  const exposed = drawerRef.value?.dialogElement
+  const result = typeof exposed === 'function' ? exposed() : exposed?.value || exposed || null
+  return result
+}
+
+// Focus trap logic (simplified)
+watch(isVisible, async (visible) => {
+  if (visible) {
+    await nextTick()
+    await new Promise(resolve => setTimeout(resolve, 50))
+    const dialogElement = getDrawerDialogElement()
+    if (dialogElement && props.config.debug) {
+      console.log('[CookieConsent] Focus trap activated')
+    }
+  }
+})
+
+// Event handlers
+const handleAcceptAll = () => {
+  acceptAll()
+}
+
+const handleRejectAll = () => {
+  rejectAll()
+}
+
+const handleAcceptSelection = () => {
+  acceptSelection()
+}
+
+const handleOpenSettings = () => {
+  openSettings()
+}
+
+const handleSelectTab = (tabId) => {
+  selectTab(tabId)
+}
+
+const handleToggleCategory = (categoryId) => {
+  const current = categories.value[categoryId]
+  if (current) {
+    categories.value[categoryId] = { ...current, enabled: !current.enabled }
+  }
+}
+
+const handleClose = () => {
+  if (isSettingsMode.value) {
+    closeSettings()
+  }
+}
+
+// Cleanup on unmount
+onUnmounted(() => {
+  // Add cleanup if needed
+})
+
+// Expose methods for external use
+defineExpose({
+  acceptAll: handleAcceptAll,
+  rejectAll: handleRejectAll,
+  resetConsent: () => {
+    // Reset logic if needed
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.cookie-consent {
+  position: relative;
+
+  &--has-modal {
+    min-height: 100vh;
+  }
+}
+</style>

package/src/vue/CookieDrawer.vue

@@ -0,0 +1,203 @@
+<template>
+  <!-- Backdrop with opacity animation -->
+  <Transition name="backdrop-fade" appear>
+    <div
+      v-if="isVisible && !isEssentialBanner"
+      class="cookie-drawer__backdrop"
+      @click="handleBackdropClick"
+    ></div>
+  </Transition>
+
+  <!-- Drawer with slide animation -->
+  <Transition :name="drawerAnimation" appear>
+    <div
+      v-if="isVisible"
+      :class="['cookie-drawer__content-wrapper', drawerClasses, rootClasses]"
+    >
+      <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">
+            {{ 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 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.' }}
+          </div>
+
+          <button
+            v-if="isSettingsMode"
+            @click="handleClose"
+            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>
+          </button>
+        </div>
+
+        <!-- Essential Banner -->
+        <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>
+            </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>
+            </div>
+          </div>
+
+          <!-- Settings Mode -->
+          <div v-else class="cookie-drawer__settings">
+            <!-- Tabs -->
+            <div v-if="enabledSettingsTabs.length > 1" class="cookie-drawer__tabs">
+              <button
+                v-for="tab in enabledSettingsTabs"
+                :key="tab"
+                :class="['cookie-drawer__tab', { 'cookie-drawer__tab--active': currentTab === tab }]"
+                @click="$emit('selectTab', tab)"
+              >
+                {{ getCategoryTitle(tab) }}
+              </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>
+
+              <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) }}
+                </div>
+              </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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  isVisible: Boolean,
+  isSettingsMode: Boolean,
+  currentTab: String,
+  categories: Object,
+  config: Object,
+  consentVersion: String,
+  capabilities: Object,
+  isV2: Boolean
+})
+
+const emit = defineEmits([
+  'close',
+  'openSettings',
+  'selectTab',
+  'toggleCategory',
+  'acceptSelection',
+  'acceptAll',
+  'rejectAll'
+])
+
+const dialogRef = ref(null)
+
+const isEssentialBanner = computed(() => props.config.mode === 'essential')
+
+const drawerClasses = computed(() => ({
+  'cookie-drawer__content-wrapper--settings': props.isSettingsMode,
+  'cookie-drawer__content-wrapper--banner': !props.isSettingsMode
+}))
+
+const rootClasses = computed(() => ({
+  'cookie-drawer__content-wrapper--bottom': true
+}))
+
+const drawerAnimation = computed(() => 
+  props.isSettingsMode ? 'drawer-slide-up' : 'banner-slide-up'
+)
+
+const enabledSettingsTabs = computed(() => {
+  return ['privacy', ...Object.keys(props.categories || {}).filter(id => 
+    props.categories[id]?.enabled
+  )]
+})
+
+const getCategoryTitle = (categoryId) => {
+  return props.categories[categoryId]?.name || categoryId
+}
+
+const getCategoryDescription = (categoryId) => {
+  return props.categories[categoryId]?.description || `Description for ${categoryId} cookies.`
+}
+
+const handleBackdropClick = () => {
+  if (!props.isSettingsMode) {
+    emit('close')
+  }
+}
+
+const handleClose = () => {
+  emit('close')
+}
+
+// Expose dialog element for focus trap
+defineExpose({
+  dialogElement: () => dialogRef.value
+})
+</script>
+
+<style src="@el7ven/cookie-consent/dist/styles"></style>

package/src/vue/components/index.js

@@ -0,0 +1,2 @@
+export { default as CookieConsent } from '../CookieConsent.vue'
+export { default as CookieDrawer } from '../CookieDrawer.vue'

package/src/vue/composables/useCookieConsent.js

@@ -0,0 +1,182 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+export function useCookieConsent(config = {}) {
+  const isVisible = ref(false)
+  const isSettingsMode = ref(false)
+  const currentTab = ref('categories')
+  const consentVersion = ref('1.0.0')
+  
+  const categories = ref({
+    necessary: { 
+      required: true, 
+      enabled: true, 
+      name: 'Essential Cookies',
+      description: 'These cookies are necessary for the website to function and cannot be switched off.'
+    },
+    analytics: { 
+      required: false, 
+      enabled: false, 
+      name: 'Analytics Cookies',
+      description: 'These cookies help us understand how visitors interact with our website.'
+    },
+    marketing: { 
+      required: false, 
+      enabled: false, 
+      name: 'Marketing Cookies',
+      description: 'These cookies are used to track visitors across websites to show relevant ads.'
+    }
+  })
+  
+  const capabilities = ref({
+    hasConsented: false,
+    canShowSettings: true,
+    canAcceptAll: true,
+    canRejectAll: true,
+    canCustomize: true
+  })
+  
+  const isV2 = ref(true)
+  
+  const hasConsent = computed(() => {
+    return localStorage.getItem('cookie-consent') !== null
+  })
+  
+  const consentData = computed(() => {
+    const stored = localStorage.getItem('cookie-consent')
+    return stored ? JSON.parse(stored) : null
+  })
+  
+  const showConsent = () => {
+    isVisible.value = true
+  }
+  
+  const hideConsent = () => {
+    isVisible.value = false
+  }
+  
+  const openSettings = () => {
+    isSettingsMode.value = true
+  }
+  
+  const closeSettings = () => {
+    isSettingsMode.value = false
+  }
+  
+  const selectTab = (tab) => {
+    currentTab.value = tab
+  }
+  
+  const toggleCategory = (categoryName, enabled) => {
+    if (categories.value[categoryName] && !categories.value[categoryName].required) {
+      categories.value[categoryName].enabled = enabled
+    }
+  }
+  
+  const acceptSelection = () => {
+    const consent = {
+      version: consentVersion.value,
+      timestamp: new Date().toISOString(),
+      categories: Object.keys(categories.value).reduce((acc, key) => {
+        acc[key] = categories.value[key].enabled
+        return acc
+      }, {})
+    }
+    
+    localStorage.setItem('cookie-consent', JSON.stringify(consent))
+    capabilities.value.hasConsented = true
+    hideConsent()
+    closeSettings()
+  }
+  
+  const acceptAll = () => {
+    Object.keys(categories.value).forEach(key => {
+      categories.value[key].enabled = true
+    })
+    acceptSelection()
+  }
+  
+  const rejectAll = () => {
+    Object.keys(categories.value).forEach(key => {
+      if (!categories.value[key].required) {
+        categories.value[key].enabled = false
+      }
+    })
+    acceptSelection()
+  }
+  
+  const resetConsent = () => {
+    localStorage.removeItem('cookie-consent')
+    capabilities.value.hasConsented = false
+    Object.keys(categories.value).forEach(key => {
+      if (!categories.value[key].required) {
+        categories.value[key].enabled = false
+      }
+    })
+  }
+  
+  const handleClose = () => {
+    hideConsent()
+    closeSettings()
+  }
+  
+  const handleOpenSettings = () => {
+    openSettings()
+  }
+  
+  const handleSelectTab = (tab) => {
+    selectTab(tab)
+  }
+  
+  const handleToggleCategory = (categoryName, enabled) => {
+    toggleCategory(categoryName, enabled)
+  }
+  
+  const handleAcceptSelection = () => {
+    acceptSelection()
+  }
+  
+  const handleAcceptAll = () => {
+    acceptAll()
+  }
+  
+  const handleRejectAll = () => {
+    rejectAll()
+  }
+  
+  onMounted(() => {
+    if (!hasConsent.value) {
+      showConsent()
+    } else {
+      capabilities.value.hasConsented = true
+    }
+  })
+  
+  return {
+    isVisible,
+    isSettingsMode,
+    currentTab,
+    categories,
+    capabilities,
+    isV2,
+    consentVersion,
+    hasConsent,
+    consentData,
+    showConsent,
+    hideConsent,
+    openSettings,
+    closeSettings,
+    selectTab,
+    toggleCategory,
+    acceptSelection,
+    acceptAll,
+    rejectAll,
+    resetConsent,
+    handleClose,
+    handleOpenSettings,
+    handleSelectTab,
+    handleToggleCategory,
+    handleAcceptSelection,
+    handleAcceptAll,
+    handleRejectAll
+  }
+}

package/src/vue/index.js

@@ -0,0 +1,58 @@
+import { computed, ref } from 'vue'
+import { createCookieKit, DEFAULT_CONFIG } from '../core/index.js'
+import { VERSION, getVersion, getVersionInfo, logVersion } from './version.js'
+
+export { createCookieKit, DEFAULT_CONFIG, VERSION, getVersion, getVersionInfo, logVersion }
+
+export function useCookieKitVue(userConfig = {}) {
+  const core = createCookieKit(userConfig)
+
+  const consent = ref(core.getConsent())
+  const categories = ref(consent.value?.categories || core.getDefaultCategoriesState())
+
+  core.on('consentChanged', ({ consent: nextConsent, categories: nextCategories }) => {
+    consent.value = nextConsent
+    categories.value = { ...nextCategories }
+  })
+
+  const hasConsented = computed(() => consent.value?.hasConsented === true)
+
+  const acceptAll = async () => {
+    const next = await core.acceptAll('banner')
+    consent.value = next
+    categories.value = { ...next.categories }
+    return next
+  }
+
+  const rejectAll = async () => {
+    const next = await core.rejectAll('banner')
+    consent.value = next
+    categories.value = { ...next.categories }
+    return next
+  }
+
+  const acceptSelected = async (selectedIds) => {
+    const next = await core.acceptSelected(selectedIds, 'settings')
+    consent.value = next
+    categories.value = { ...next.categories }
+    return next
+  }
+
+  const resetConsent = () => {
+    core.clearConsent()
+    consent.value = null
+    categories.value = core.getDefaultCategoriesState()
+  }
+
+  return {
+    core,
+    consent,
+    categories,
+    hasConsented,
+    acceptAll,
+    rejectAll,
+    acceptSelected,
+    resetConsent,
+    hasCategoryConsent: category => core.hasCategoryConsent(category)
+  }
+}

package/src/vue/index.test.js

@@ -0,0 +1,40 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+import { useCookieKitVue } from './index.js'
+
+function createMemoryStorageAdapter() {
+  const memory = new Map()
+
+  return {
+    getItem: key => memory.get(key) ?? null,
+    setItem: (key, value) => memory.set(key, value),
+    removeItem: key => memory.delete(key),
+    defaultKey: 'cookie_consent'
+  }
+}
+
+test('vue adapter: composable state updates after actions', async () => {
+  const kit = useCookieKitVue({
+    storageAdapter: createMemoryStorageAdapter(),
+    categories: {
+      necessary: { required: true, enabled: true },
+      analytics: { required: false, enabled: true }
+    }
+  })
+
+  assert.equal(kit.hasConsented.value, false)
+
+  await kit.acceptAll()
+
+  assert.equal(kit.hasConsented.value, true)
+  assert.equal(kit.consent.value?.categories?.necessary, true)
+  assert.equal(kit.consent.value?.categories?.analytics, true)
+
+  kit.resetConsent()
+
+  assert.equal(kit.hasConsented.value, false)
+  assert.equal(kit.consent.value, null)
+  assert.equal(kit.categories.value.necessary, true)
+  assert.equal(kit.categories.value.analytics, false)
+})

package/src/vue/version.js

@@ -0,0 +1,29 @@
+/**
+ * Version metadata for package runtime.
+ */
+
+export const VERSION = '1.0.0-beta.0'
+export const PACKAGE_NAME = '@el7ven/cookie-consent/vue'
+
+// Vue adapter version metadata.
+export const VERSION_INFO = {
+  version: VERSION,
+  name: PACKAGE_NAME,
+  buildDate: new Date().toISOString(),
+  environment: 'production'
+}
+
+// Return package version.
+export function getVersion() {
+  return VERSION
+}
+
+// Return full version metadata.
+export function getVersionInfo() {
+  return VERSION_INFO
+}
+
+// Print runtime version in debug-friendly format.
+export function logVersion() {
+  console.log(`💚 ${PACKAGE_NAME} v${VERSION}`)
+}