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

package/README.md

@@ -118,6 +118,7 @@ colors: {
   controlButtonHoverBackground: '#000',
   controlButtonIconColor: '#000',
   controlButtonIconHoverColor: '#fff',
+  focusRingColor: '#808080',
   modalBackground: '#fff',
   modalButtonBackground: '#000',
   modalButtonColor: '#fff',
@@ -140,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
@@ -195,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.3",
+  "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.3";
+const version = "5.0.0-beta.5";
 
 const en = {
   accept: "Accept",
@@ -41,6 +41,7 @@ const DEFAULTS = {
     controlButtonHoverBackground: "#000",
     controlButtonIconColor: "#000",
     controlButtonIconHoverColor: "#fff",
+    focusRingColor: "#808080",
     modalBackground: "#fff",
     modalButtonBackground: "#000",
     modalButtonColor: "#fff",
@@ -57,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,20 +93,23 @@
                             ) ||
                             (getCookie(
                               moduleOptions.cookieNameIsConsentGiven
-                            ) !== 'true' &&
+                            ) !== allCookieIdsString &&
                               typeof moduleOptions.isIframeBlocked ===
                                 'object' &&
                               moduleOptions.isIframeBlocked.initialState)
                           "
                           @change="toogleCookie(cookie)"
                         />
+                        <button @click="toggleButton($event)">
+                          {{ getName(cookie.name) }}
+                        </button>
                         <label
+                          class="cookieControl__ModalCookieName"
                           :for="resolveTranslatable(cookie.name, props.locale)"
+                          tabindex="0"
+                          @keydown="toggleLabel($event)"
                         >
                           {{ getName(cookie.name) }}
-                        </label>
-                        <span class="cookieControl__ModalCookieName">
-                          {{ getName(cookie.name) }}
                           <span v-if="cookie.description">
                             {{ getDescription(cookie.description) }}
                           </span>
@@ -125,7 +126,7 @@
                                 .join(', ')
                             }}
                           </span>
-                        </span>
+                        </label>
                       </div>
                     </li>
                   </ul>
@@ -173,6 +174,7 @@ import { ref, computed, onBeforeMount, watch } from 'vue'
 
 import { Cookie, CookieType, Locale, Translatable } from '../types'
 import {
+  getAllCookieIdsString,
   getCookie,
   getCookieId,
   getCookieIds,
@@ -201,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])
 
@@ -284,6 +287,15 @@ const setCookies = ({
     ? getCookieIds(cookiesEnabled.value)
     : []
 }
+const toggleButton = ($event: MouseEvent) => {
+  ;(
+    ($event.target as HTMLButtonElement | null)
+      ?.nextSibling as HTMLLabelElement | null
+  )?.click()
+}
+const toggleLabel = ($event: KeyboardEvent) => {
+  if ($event.key === ' ') ($event.target as HTMLLabelElement | null)?.click()
+}
 
 // lifecycle
 onBeforeMount(async () => {
@@ -308,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'
@@ -328,7 +342,7 @@ watch(
     if (isConsentGiven.value) {
       setCookie(
         moduleOptions.cookieNameCookiesEnabledIds,
-        getCookieIds(current || []).join(','),
+        getCookieIds(current || []).join('|'),
         {
           expires,
         }
@@ -374,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/styles.css

@@ -86,6 +86,9 @@
   color: var(--cookie-control-barButtonHoverColor);
   background-color: var(--cookie-control-barButtonHoverBackground);
 }
+.cookieControl__Bar button:focus{
+  box-shadow: 0 0 0 3px var(--cookie-control-focusRingColor);
+}
 .cookieControl__Bar button + button {
   margin-left: 10px;
 }
@@ -184,6 +187,9 @@
   color: var(--cookie-control-modalButtonHoverColor);
   background-color: var(--cookie-control-modalButtonHoverBackground);
 }
+.cookieControl__Modal button:focus {
+  box-shadow: 0 0 0 3px var(--cookie-control-focusRingColor);
+}
 .cookieControl__ModalContent {
   position: relative;
   width: 100%;
@@ -227,20 +233,20 @@
 .cookieControl__ModalContent input {
   display: none;
 }
-.cookieControl__ModalContent input:checked + label {
+.cookieControl__ModalContent input:checked + button {
   background-color: var(--cookie-control-checkboxActiveBackground);
 }
-.cookieControl__ModalContent input:checked + label:before {
+.cookieControl__ModalContent input:checked + button:before {
   background-color: var(--cookie-control-checkboxActiveCircleBackground);
   transform: translate3d(100%, -50%, 0);
 }
-.cookieControl__ModalContent input:checked:disabled + label {
+.cookieControl__ModalContent input:checked:disabled + button {
   background-color: var(--cookie-control-checkboxDisabledBackground);
 }
-.cookieControl__ModalContent input:checked:disabled + label:before {
+.cookieControl__ModalContent input:checked:disabled + button:before {
   background-color: var(--cookie-control-checkboxDisabledCircleBackground);
 }
-.cookieControl__ModalContent label {
+.cookieControl__ModalContent input + button {
   position: relative;
   min-width: 36px;
   min-height: 20px;
@@ -252,7 +258,7 @@
   transition: background-color 200ms;
   background-color: var(--cookie-control-checkboxInactiveBackground);
 }
-.cookieControl__ModalContent label:before {
+.cookieControl__ModalContent input + button:before {
   position: absolute;
   content: '';
   top: 50%;

package/dist/runtime/types.mjs

@@ -23,6 +23,7 @@ export const DEFAULTS = {
     controlButtonHoverBackground: "#000",
     controlButtonIconColor: "#000",
     controlButtonIconHoverColor: "#fff",
+    focusRingColor: "#808080",
     modalBackground: "#fff",
     modalButtonBackground: "#000",
     modalButtonColor: "#fff",
@@ -39,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.3",
+  "version": "5.0.0-beta.5",
   "description": "Nuxt Cookies Control Module",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
   "maintainers": [