@el7ven/cookie-kit 0.2.19 → 0.2.21

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

@@ -1,8 +1,13 @@
 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 }
+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)