@dargmuesli/nuxt-cookie-control 5.3.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: {
@@ -171,6 +174,9 @@ isIframeBlocked: false,
 //   initialState: false
 // },
 
+// Switch to toggle the modal being shown right away, requiring a user's decision.
+isModalForced: false,
+
 // The domain to set cookies on.
 // This is useful in case you have subdomains (shop.yourdomain.com)
 domain: 'yourdomain.com',

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;
@@ -48,6 +49,7 @@ interface ModuleOptions {
     isIframeBlocked: boolean | {
         initialState: boolean;
     };
+    isModalForced: boolean;
     locales: Locale[];
     localeTexts: PartialRecord<Locale, Partial<LocaleStrings>>;
 }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.3.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.3.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",
@@ -68,6 +69,7 @@ const DEFAULTS = {
   isCssPonyfillEnabled: false,
   isDashInDescriptionEnabled: true,
   isIframeBlocked: false,
+  isModalForced: false,
   domain: "",
   locales: ["en"],
   localeTexts: { en }

package/dist/runtime/components/CookieControl.vue

@@ -3,7 +3,7 @@
     <section class="cookieControl">
       <transition :name="`cookieControl__Bar--${moduleOptions.barPosition}`">
         <div
-          v-if="!isConsentGiven"
+          v-if="!isConsentGiven && !moduleOptions.isModalForced"
           :class="`cookieControl__Bar cookieControl__Bar--${moduleOptions.barPosition}`"
         >
           <div class="cookieControl__BarContainer">
@@ -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"
@@ -53,6 +57,7 @@
             <div class="cookieControl__ModalContentInner">
               <slot name="modal" />
               <button
+                v-if="!moduleOptions.isModalForced"
                 class="cookieControl__ModalClose"
                 @click="isModalActive = false"
                 v-text="localeStrings?.close"
@@ -166,6 +171,7 @@
                   v-text="localeStrings?.acceptAll"
                 />
                 <button
+                  v-if="!moduleOptions.isModalForced"
                   @click="
                     () => {
                       declineAll()
@@ -236,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)
 
@@ -253,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 ? '' : '-'
@@ -282,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,
@@ -308,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()
 }
@@ -337,6 +348,10 @@ onBeforeMount(() => {
       }
     }
   }
+
+  if (moduleOptions.isModalForced && !isConsentGiven.value) {
+    isModalActive.value = true
+  }
 })
 watch(
   () => cookiesEnabled.value,

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;
@@ -51,6 +52,7 @@ export interface ModuleOptions {
     isIframeBlocked: boolean | {
         initialState: boolean;
     };
+    isModalForced: boolean;
     locales: Locale[];
     localeTexts: PartialRecord<Locale, Partial<LocaleStrings>>;
 }

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",
@@ -49,6 +50,7 @@ export const DEFAULTS = {
   isCssPonyfillEnabled: false,
   isDashInDescriptionEnabled: true,
   isIframeBlocked: false,
+  isModalForced: false,
   domain: "",
   locales: ["en"],
   localeTexts: { en }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "description": "Nuxt Cookies Control Module",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
   "maintainers": [
@@ -36,7 +36,7 @@
     "lint": "pnpm prepack && eslint --ext .js,.ts,.vue . && nuxi typecheck playground"
   },
   "dependencies": {
-    "@nuxt/kit": "3.3.3",
+    "@nuxt/kit": "3.4.0",
     "@sindresorhus/slugify": "2.2.0",
     "css-vars-ponyfill": "2.4.8",
     "js-cookie": "3.0.1",
@@ -44,20 +44,20 @@
   },
   "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.37.0",
+    "eslint": "8.38.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
     "husky": "8.0.3",
-    "lint-staged": "13.2.0",
-    "nuxt": "3.3.3",
+    "lint-staged": "13.2.1",
+    "nuxt": "3.4.0",
     "prettier": "2.8.7",
-    "typescript": "5.0.3",
+    "typescript": "5.0.4",
     "vue": "3.2.47",
     "vue-tsc": "1.2.0",
-    "webpack": "5.77.0"
+    "webpack": "5.79.0"
   },
   "publishConfig": {
     "access": "public"