@dargmuesli/nuxt-cookie-control 5.4.0 → 5.5.0

package/README.md

@@ -99,6 +99,9 @@ if (cookieControl.cookiesEnabledIds.value.includes('google-analytics')) {
 // 'top-left', 'top-right', 'top-full', 'bottom-left', 'bottom-right', 'bottom-full'
 barPosition: 'bottom-full',
 
+// Switch to toggle if clicking the overlay outside the configuration modal closes the modal.
+closeModalOnClickOutside: true,
+
 // Component colors.
 // If you want to disable colors set colors property to false.
 colors: {

package/dist/module.d.ts

@@ -30,6 +30,7 @@ interface LocaleStrings {
 }
 interface ModuleOptions {
     barPosition: 'top-left' | 'top-right' | 'top-full' | 'bottom-left' | 'bottom-right' | 'bottom-full';
+    closeModalOnClickOutside: boolean;
     colors: false | Record<string, any>;
     cookieExpiryOffsetMs: number;
     cookieNameCookiesEnabledIds: string;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "configKey": "cookieControl",
   "compatibility": {
     "nuxt": "^3.0.0"

package/dist/module.mjs

@@ -3,7 +3,7 @@ import { pathToFileURL } from 'node:url';
 import { createResolver, defineNuxtModule, addPlugin, addImports, addTemplate, extendWebpackConfig, resolvePath } from '@nuxt/kit';
 
 const name = "@dargmuesli/nuxt-cookie-control";
-const version = "5.4.0";
+const version = "5.5.0";
 
 const en = {
   accept: "Accept",
@@ -25,6 +25,7 @@ const en = {
 
 const DEFAULTS = {
   barPosition: "bottom-full",
+  closeModalOnClickOutside: false,
   colors: {
     barBackground: "#000",
     barButtonBackground: "#fff",

package/dist/runtime/components/CookieControl.vue

@@ -43,7 +43,11 @@
         </svg>
       </button>
       <transition name="cookieControl__Modal">
-        <div v-if="isModalActive" class="cookieControl__Modal">
+        <div
+          v-if="isModalActive"
+          class="cookieControl__Modal"
+          @click.self="onModalClick"
+        >
           <p
             v-if="isSaved"
             class="cookieControl__ModalUnsaved"
@@ -238,12 +242,6 @@ const accept = () => {
     cookiesOptionalEnabled: moduleOptions.cookies.optional,
   })
 }
-const decline = () => {
-  setCookies({
-    isConsentGiven: true,
-    cookiesOptionalEnabled: moduleOptions.cookies.necessary,
-  })
-}
 const acceptPartial = () => {
   const localCookiesEnabledIds = getCookieIds(localCookiesEnabled.value)
 
@@ -255,23 +253,18 @@ const acceptPartial = () => {
     ].filter((cookie) => localCookiesEnabledIds.includes(getCookieId(cookie))),
   })
 }
+const decline = () => {
+  setCookies({
+    isConsentGiven: true,
+    cookiesOptionalEnabled: moduleOptions.cookies.necessary,
+  })
+}
 const declineAll = () => {
   setCookies({
     isConsentGiven: false,
     cookiesOptionalEnabled: [],
   })
 }
-const toogleCookie = (cookie: Cookie) => {
-  const cookieIndex = getCookieIds(localCookiesEnabled.value).indexOf(
-    getCookieId(cookie)
-  )
-
-  if (cookieIndex < 0) {
-    localCookiesEnabled.value.push(cookie)
-  } else {
-    localCookiesEnabled.value.splice(cookieIndex, 1)
-  }
-}
 const getDescription = (description: Translatable) =>
   `${
     moduleOptions.isDashInDescriptionEnabled === false ? '' : '-'
@@ -284,6 +277,11 @@ const getName = (name: Translatable) => {
 const init = () => {
   expires.setTime(expires.getTime() + moduleOptions.cookieExpiryOffsetMs)
 }
+const onModalClick = () => {
+  if (moduleOptions.closeModalOnClickOutside) {
+    isModalActive.value = false
+  }
+}
 const setCookies = ({
   cookiesOptionalEnabled: cookiesOptionalEnabledNew,
   isConsentGiven: isConsentGivenNew,
@@ -310,6 +308,17 @@ const toggleButton = ($event: MouseEvent) => {
       ?.nextSibling as HTMLLabelElement | null
   )?.click()
 }
+const toogleCookie = (cookie: Cookie) => {
+  const cookieIndex = getCookieIds(localCookiesEnabled.value).indexOf(
+    getCookieId(cookie)
+  )
+
+  if (cookieIndex < 0) {
+    localCookiesEnabled.value.push(cookie)
+  } else {
+    localCookiesEnabled.value.splice(cookieIndex, 1)
+  }
+}
 const toggleLabel = ($event: KeyboardEvent) => {
   if ($event.key === ' ') ($event.target as HTMLLabelElement | null)?.click()
 }

package/dist/runtime/types.d.ts

@@ -33,6 +33,7 @@ export interface LocaleStrings {
 }
 export interface ModuleOptions {
     barPosition: 'top-left' | 'top-right' | 'top-full' | 'bottom-left' | 'bottom-right' | 'bottom-full';
+    closeModalOnClickOutside: boolean;
     colors: false | Record<string, any>;
     cookieExpiryOffsetMs: number;
     cookieNameCookiesEnabledIds: string;

package/dist/runtime/types.mjs

@@ -6,6 +6,7 @@ export var CookieType = /* @__PURE__ */ ((CookieType2) => {
 })(CookieType || {});
 export const DEFAULTS = {
   barPosition: "bottom-full",
+  closeModalOnClickOutside: false,
   colors: {
     barBackground: "#000",
     barButtonBackground: "#fff",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "Nuxt Cookies Control Module",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
   "maintainers": [
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@dargmuesli/nuxt-cookie-control": "link:.",
-    "@nuxt/module-builder": "0.2.1",
+    "@nuxt/module-builder": "0.3.0",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
     "@types/js-cookie": "3.0.3",
     "eslint": "8.38.0",
@@ -57,7 +57,7 @@
     "typescript": "5.0.4",
     "vue": "3.2.47",
     "vue-tsc": "1.2.0",
-    "webpack": "5.78.0"
+    "webpack": "5.79.0"
   },
   "publishConfig": {
     "access": "public"