@dargmuesli/nuxt-cookie-control 5.0.0-beta.4 → 5.0.0-beta.5

package/README.md

@@ -141,8 +141,8 @@ cookies: {
 cookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, // one year
 
 // Names for the cookies that are being set by this module.
-cookieNameIsConsentGiven: 'cookie_control_is_consent_given',
-cookieNameCookiesEnabledIds: 'cookie_control_cookies_enabled_ids',
+cookieNameIsConsentGiven: 'ncc_c',
+cookieNameCookiesEnabledIds: 'ncc_e',
 
 // Switch to toggle the "accept necessary" button.
 isAcceptNecessaryButtonEnabled: true
@@ -196,6 +196,7 @@ Every property the includes a `{ en: ... }` value is a translatable property tha
     en:  'Used for cookie control.'
   },
   id: 'ga', // if unset, `getCookieId(cookie)` returns the cookie's slugified name instead, which e.g. is used to fill the state's `enabledCookieIds` list
+  // use a short cookie id to save bandwidth!
   name: {
     en: 'Google Analytics' // you always have to specify a cookie name (in English)
   },

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.5",
   "configKey": "cookieControl",
   "compatibility": {
     "nuxt": "^3.0.0"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { resolve } from 'node:path';
 import { createResolver, defineNuxtModule, addPlugin, addImports, addTemplate, extendWebpackConfig, resolvePath } from '@nuxt/kit';
 
 const name = "@dargmuesli/nuxt-cookie-control";
-const version = "5.0.0-beta.4";
+const version = "5.0.0-beta.5";
 
 const en = {
   accept: "Accept",
@@ -58,8 +58,8 @@ const DEFAULTS = {
   },
   cookieExpiryOffsetMs: 1e3 * 60 * 60 * 24 * 365,
   // one year
-  cookieNameIsConsentGiven: "cookie_control_is_consent_given",
-  cookieNameCookiesEnabledIds: "cookie_control_cookies_enabled_ids",
+  cookieNameIsConsentGiven: "ncc_c",
+  cookieNameCookiesEnabledIds: "ncc_e",
   isAcceptNecessaryButtonEnabled: true,
   isControlButtonEnabled: true,
   isCookieIdVisible: false,

package/dist/runtime/components/CookieControl.vue

@@ -3,7 +3,7 @@
     <section class="cookieControl">
       <transition :name="`cookieControl__Bar--${moduleOptions.barPosition}`">
         <div
-          v-if="isConsentGiven === undefined"
+          v-if="!isConsentGiven"
           :class="`cookieControl__Bar cookieControl__Bar--${moduleOptions.barPosition}`"
         >
           <div class="cookieControl__BarContainer">
@@ -29,9 +29,7 @@
         </div>
       </transition>
       <button
-        v-if="
-          moduleOptions.isControlButtonEnabled && isConsentGiven !== undefined
-        "
+        v-if="moduleOptions.isControlButtonEnabled && isConsentGiven"
         aria-label="Cookie control"
         class="cookieControl__ControlButton"
         data-testid="nuxt-cookie-control-control-button"
@@ -95,14 +93,14 @@
                             ) ||
                             (getCookie(
                               moduleOptions.cookieNameIsConsentGiven
-                            ) !== 'true' &&
+                            ) !== allCookieIdsString &&
                               typeof moduleOptions.isIframeBlocked ===
                                 'object' &&
                               moduleOptions.isIframeBlocked.initialState)
                           "
                           @change="toogleCookie(cookie)"
                         />
-                        <button @keydown="toggleButton($event)">
+                        <button @click="toggleButton($event)">
                           {{ getName(cookie.name) }}
                         </button>
                         <label
@@ -176,6 +174,7 @@ import { ref, computed, onBeforeMount, watch } from 'vue'
 
 import { Cookie, CookieType, Locale, Translatable } from '../types'
 import {
+  getAllCookieIdsString,
   getCookie,
   getCookieId,
   getCookieIds,
@@ -204,13 +203,14 @@ const {
 // data
 const expires = new Date()
 const localCookiesEnabled = ref([...(cookiesEnabled.value || [])])
+const allCookieIdsString = getAllCookieIdsString(moduleOptions)
 
 // computations
 const isSaved = computed(
   () =>
     getCookieIds(cookiesEnabled.value || [])
       .sort()
-      .join(',') !== getCookieIds(localCookiesEnabled.value).sort().join(',')
+      .join('|') !== getCookieIds(localCookiesEnabled.value).sort().join('|')
 )
 const localeStrings = computed(() => moduleOptions.localeTexts[props.locale])
 
@@ -287,19 +287,14 @@ const setCookies = ({
     ? getCookieIds(cookiesEnabled.value)
     : []
 }
-const toggleButton = ($event: KeyboardEvent) => {
-  if ($event.key === ' ')
-    (
-      ($event.target as HTMLButtonElement | null)
-        ?.nextSibling as HTMLLabelElement | null
-    )?.click()
+const toggleButton = ($event: MouseEvent) => {
+  ;(
+    ($event.target as HTMLButtonElement | null)
+      ?.nextSibling as HTMLLabelElement | null
+  )?.click()
 }
-const toggleLabel = ($event: KeyboardEvent | MouseEvent) => {
-  if ($event instanceof KeyboardEvent) {
-    if ($event.key === ' ') ($event.target as HTMLLabelElement | null)?.click()
-  } else {
-    ;($event.target as HTMLLabelElement | null)?.click()
-  }
+const toggleLabel = ($event: KeyboardEvent) => {
+  if ($event.key === ' ') ($event.target as HTMLLabelElement | null)?.click()
 }
 
 // lifecycle
@@ -325,7 +320,9 @@ onBeforeMount(async () => {
     }
   }
 
-  if (getCookie(moduleOptions.cookieNameIsConsentGiven) === 'true') {
+  if (
+    getCookie(moduleOptions.cookieNameIsConsentGiven) === allCookieIdsString
+  ) {
     for (const cookieOptional of moduleOptions.cookies.optional) {
       if (
         typeof moduleOptions.isIframeBlocked === 'boolean'
@@ -345,7 +342,7 @@ watch(
     if (isConsentGiven.value) {
       setCookie(
         moduleOptions.cookieNameCookiesEnabledIds,
-        getCookieIds(current || []).join(','),
+        getCookieIds(current || []).join('|'),
         {
           expires,
         }
@@ -391,9 +388,13 @@ watch(isConsentGiven, (current, _previous) => {
   if (current === undefined) {
     removeCookie(moduleOptions.cookieNameIsConsentGiven)
   } else {
-    setCookie(moduleOptions.cookieNameIsConsentGiven, current.toString(), {
-      expires,
-    })
+    setCookie(
+      moduleOptions.cookieNameIsConsentGiven,
+      current ? allCookieIdsString : '0',
+      {
+        expires,
+      }
+    )
   }
 })
 

package/dist/runtime/methods.d.ts

@@ -1,4 +1,5 @@
-import { Cookie, Translatable } from './types';
+import { Cookie, ModuleOptions, Translatable } from './types';
+export declare const getAllCookieIdsString: (moduleOptions: ModuleOptions) => string;
 export declare const getCookie: (name: string) => any;
 export declare const getCookieId: (cookie: Cookie) => string;
 export declare const getCookieIds: (cookies: Cookie[]) => string[];

package/dist/runtime/methods.mjs

@@ -1,6 +1,10 @@
 import Cookies from "js-cookie";
 import slugify from "@sindresorhus/slugify";
 import { LOCALE_DEFAULT } from "./constants.mjs";
+export const getAllCookieIdsString = (moduleOptions) => getCookieIds([
+  ...moduleOptions.cookies.necessary,
+  ...moduleOptions.cookies.optional
+]).join("");
 export const getCookie = (name) => Cookies.get(name);
 export const getCookieId = (cookie) => cookie.id || slugify(resolveTranslatable(cookie.name));
 export const getCookieIds = (cookies) => cookies.map((cookie) => getCookieId(cookie));

package/dist/runtime/plugin.mjs

@@ -1,6 +1,6 @@
 import Cookies from "js-cookie";
 import { ref } from "vue";
-import { getCookieId } from "./methods.mjs";
+import { getAllCookieIdsString, getCookieId } from "./methods.mjs";
 import { defineNuxtPlugin } from "#imports";
 import moduleOptions from "#build/cookie-control-options";
 export default defineNuxtPlugin((_nuxtApp) => {
@@ -9,9 +9,9 @@ export default defineNuxtPlugin((_nuxtApp) => {
   );
   const cookieCookiesEnabledIds = Cookies.get(
     moduleOptions.cookieNameCookiesEnabledIds
-  )?.split(",");
+  )?.split("|");
   const isConsentGiven = ref(
-    cookieIsConsentGiven === void 0 ? void 0 : cookieIsConsentGiven === "true"
+    cookieIsConsentGiven === void 0 ? void 0 : cookieIsConsentGiven === getAllCookieIdsString(moduleOptions)
   );
   const cookiesEnabled = ref(
     cookieCookiesEnabledIds === void 0 ? void 0 : [

package/dist/runtime/types.mjs

@@ -40,8 +40,8 @@ export const DEFAULTS = {
   },
   cookieExpiryOffsetMs: 1e3 * 60 * 60 * 24 * 365,
   // one year
-  cookieNameIsConsentGiven: "cookie_control_is_consent_given",
-  cookieNameCookiesEnabledIds: "cookie_control_cookies_enabled_ids",
+  cookieNameIsConsentGiven: "ncc_c",
+  cookieNameCookiesEnabledIds: "ncc_e",
   isAcceptNecessaryButtonEnabled: true,
   isControlButtonEnabled: true,
   isCookieIdVisible: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.5",
   "description": "Nuxt Cookies Control Module",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
   "maintainers": [