@dargmuesli/nuxt-cookie-control 1.9.9 → 2.0.0-beta.1

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "1.9.9",
+  "version": "2.0.0-beta.1",
   "description": "Nuxt Cookies Control Module",
-  "license": "MIT",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
-  "contributors": [
-    "Davor Teskera",
+  "maintainers": [
     "Jonas Thelemann"
   ],
   "keywords": [
@@ -14,29 +12,73 @@
     "nuxt cookie consent",
     "nuxt gdpr consent"
   ],
-  "main": "lib/module.js",
-  "repository": "https://gitlab.com/dargmuesli/nuxt-cookie-control",
-  "publishConfig": {
-    "access": "public"
+  "repository": "https://github.com/dargmuesli/nuxt-cookie-control",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
   },
-  "eslintIgnore": [
-    "*"
+  "main": "./dist/module.cjs",
+  "types": "./dist/module.d.ts",
+  "files": [
+    "dist/**/*",
+    "src/components",
+    "src/locale"
   ],
   "scripts": {
-    "postinstall": "node lib/postinstall.js"
+    "build": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "lint": "eslint --ext .js,.ts,.vue . && nuxi typecheck playground",
+    "prepack": "npm run build",
+    "prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "release": "release-it"
   },
-  "files": [
-    "lib",
-    "components",
-    "locale"
-  ],
   "dependencies": {
-    "css-vars-ponyfill": "^2.4.7",
-    "sass": "^1.43.4",
-    "sass-loader": "^10.2.0",
-    "string-replace-loader": "^2.3.0"
+    "@nuxt/kit": "3.0.0",
+    "css-vars-ponyfill": "2.4.8",
+    "js-cookie": "3.0.1",
+    "slugify": "1.6.5",
+    "string-replace-loader": "3.1.0"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "0.2.1",
+    "@nuxtjs/eslint-config-typescript": "12.0.0",
+    "@release-it/conventional-changelog": "5.1.1",
+    "@types/js-cookie": "3.0.2",
+    "eslint": "8.29.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "husky": "8.0.2",
+    "lint-staged": "13.1.0",
+    "nuxt": "3.0.0",
+    "prettier": "2.8.0",
+    "release-it": "15.5.1",
+    "typescript": "4.9.3",
+    "vite": "3.2.5",
+    "vue": "3.2.45",
+    "vue-tsc": "1.0.11",
+    "webpack": "5.75.0"
   },
   "peerDependencies": {
-    "webpack": "^4"
+    "vite": "^3",
+    "webpack": "^5"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
+  "resolutions": {
+    "@dargmuesli/nuxt-cookie-control": "link:./"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/components/CookieControl.vue

@@ -1,182 +0,0 @@
-<template>
-  <client-only>
-    <section class="cookieControl" v-if="cookies.text">
-      <transition :name="`cookieControl__Bar--${cookies.barPosition}`">
-        <div :class="`cookieControl__Bar cookieControl__Bar--${cookies.barPosition}`" v-if="colorsSet && !cookies.consent">
-          <div class="cookieControl__BarContainer">
-            <div>
-              <slot name="bar">
-                <h3 v-text="cookies.text.barTitle"/>
-                <p v-text="cookies.text.barDescription"/>
-              </slot>
-            </div>
-            <div class="cookieControl__BarButtons">
-              <button @click="cookies.modal = true" v-text="cookies.text.manageCookies"/>
-              <button @click="setConsent({reload: false})" v-text="cookies.text.acceptAll"/>
-            </div>
-          </div>
-        </div>
-      </transition>
-      <button class="cookieControl__ControlButton" aria-label="Cookie control" v-if="cookies.controlButton && colorsSet && cookies.consent" @click="cookies.modal = true">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M510.52 255.82c-69.97-.85-126.47-57.69-126.47-127.86-70.17 0-127-56.49-127.86-126.45-27.26-4.14-55.13.3-79.72 12.82l-69.13 35.22a132.221 132.221 0 00-57.79 57.81l-35.1 68.88a132.645 132.645 0 00-12.82 80.95l12.08 76.27a132.521 132.521 0 0037.16 72.96l54.77 54.76a132.036 132.036 0 0072.71 37.06l76.71 12.15c27.51 4.36 55.7-.11 80.53-12.76l69.13-35.21a132.273 132.273 0 0057.79-57.81l35.1-68.88c12.56-24.64 17.01-52.58 12.91-79.91zM176 368c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm32-160c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm160 128c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></svg>
-      </button>
-      <transition name="cookieControl__Modal">
-        <div class="cookieControl__Modal" v-if="cookies.modal">
-          <p v-if="!saved" class="cookieControl__ModalUnsaved" v-text="cookies.text.unsaved"/>
-          <div class="cookieControl__ModalContent">
-            <div>
-              <slot name="modal"/>
-              <button @click="cookies.modal = false" class="cookieControl__ModalClose" v-text="cookies.text.close"/>
-              <template v-for="type in ['necessary', 'optional']">
-                <h3 v-text="cookies.text[type]" :key="type.id"/>
-                <ul :key="type.id">
-                  <li v-for="cookie in cookies[type]" :key="cookie.id">
-                    <div class="cookieControl__ModalInputWrapper">
-                      <input v-if="type === 'necessary' && cookie.name !== 'functional'" :id="getCookieFirstName(cookie.name)" type="checkbox" disabled checked/>
-                      <input v-else :id="getCookieFirstName(cookie.name)" type="checkbox" :checked="cookies.enabledList.includes(cookie.identifier || cookies.slugify(getCookieFirstName(cookie.name))) || (cookies.get('cookie_control_consent').length === 0 && cookie.initialState === true)" @change="toogleCookie(cookie)"/>
-                      <label :for="getCookieFirstName(cookie.name)" v-html="getName(cookie.name)"/>
-                      <span class="cookieControl__ModalCookieName">
-                        {{ getName(cookie.name) }}
-                        <span v-if="cookie.description" v-html="getDescription(cookie.description)"/>
-                      </span>
-                    </div>
-                    <template v-if="cookie.cookies">
-                      <slot name="cookie" v-bind="{config: cookie}">
-                        <ul>
-                          <li v-for="item in cookie.cookies" :key="item.id" v-html="item"/>
-                        </ul>
-                      </slot>
-                    </template>
-                  </li>
-                </ul>
-              </template>
-              <div class="cookieControl__ModalButtons">
-                <button @click="setConsent({type: 'partial'})" v-text="cookies.text.save"/>
-                <button @click="setConsent" v-text="cookies.text.acceptAll"/>
-                <button @click="setConsent({declineAll: true})" v-text="cookies.text.declineAll"/>
-              </div>
-            </div>
-          </div>
-        </div>
-      </transition>
-    </section>
-  </client-only>
-</template>
-
-<script>
-export default {
-  name: 'CookieControl',
-  props: {
-    locale: {
-      default: 'en'
-    }
-  },
-  data(){
-    return{
-      saved: true,
-      colorsSet: false,
-      cookies: this.$cookies
-    }
-  },
-
-  computed: {
-    expirationDate(){
-      let date = new Date();
-      date.setFullYear(date.getFullYear()+1);
-      return date.toUTCString();
-    },
-
-    optionalCookies(){
-      return this.cookies.optional;
-    }
-  },
-
-  methods: {
-    toogleCookie(cookie){
-      let cookieName = cookie.identifier || this.cookies.slugify(this.getCookieFirstName(cookie.name));
-      if(this.saved) this.saved = false;
-      if(!this.cookies.enabledList.includes(cookieName)) this.cookies.enabledList.push(cookieName);
-      else this.cookies.enabledList.splice(this.cookies.enabledList.indexOf(cookieName), 1);
-    },
-
-    setConsent({type, consent=true, reload=true, declineAll=false}){
-      this.cookies.set({name: 'cookie_control_consent', value: consent, expires: this.expirationDate});
-      let enabledCookies = declineAll ? [] : type === 'partial' && consent ? this.cookies.enabledList : [...this.optionalCookies.map(c => c.identifier || this.cookies.slugify(this.getCookieFirstName(c.name)))];
-      this.cookies.set({name: 'cookie_control_enabled_cookies', value: consent ? enabledCookies.join(',') : '', expires: this.expirationDate});
-      if(!reload){
-        this.cookies.setConsent()
-        this.$cookies.modal = false;
-      } else window.location.reload(true);
-    },
-
-    getDescription(description){
-      if(typeof(description) === 'string') return ` ${this.cookies.dashInDescription !== false ? '-' : ''} ${description}`;
-      else if(description[this.locale]) return ` ${this.cookies.dashInDescription !== false ? '-' : ''} ${description[this.locale]}`;
-      return '';
-    },
-
-    getName(name){
-      return name === 'functional' ? this.cookies.text['functional'] : typeof(name) === 'string' ? name : name[this.locale] ? name[this.locale] : name[Object.keys(name)[0]];
-    },
-
-    getCookieFirstName(name){
-      return typeof(name) === 'string' ? name : name[Object.keys(name)[0]]
-    },
-
-    async setTexts(isChanged=false){
-      let text = null;
-      let module = null;
-      try {
-        module = require(`../locale/${this.locale}`);
-      } catch (e) {
-        module = require(`../locale/en`);
-      }
-      text = module.default;
-      if(this.cookies.text && Object.keys(this.cookies.text).length > 0){
-        if(this.cookies.text.locale){
-          Object.assign(text, this.cookies.text.locale[this.locale])
-        }
-        if(!isChanged) Object.assign(text, this.cookies.text)
-      }
-      this.$set(this.$cookies, 'text', text);
-    }
-  },
-
-  async beforeMount (){
-    await this.setTexts();
-    if(process.browser && this.cookies.colors){
-      let key = null;
-      let variables = {};
-      for(key in this.cookies.colors){
-        let k = key.toLowerCase().includes('unactive') ? key.replace(/Unactive/g, 'Inactive') : key;
-        variables[`cookie-control-${k}`] = `${this.cookies.colors[key]}`
-      }
-
-      if(this.cookies.cssPolyfill){
-        const module = await import('css-vars-ponyfill');
-        let cssVars = module.default
-        cssVars({variables})
-      } else if(process.client){
-        for(let cssVar in variables){
-          document.documentElement.style.setProperty(`--${cssVar}`, variables[cssVar]);
-        }
-      }
-    }
-
-    if(!this.cookies.get('cookie_control_consent') || this.cookies.get('cookie_control_consent').length === 0){
-      this.optionalCookies.forEach(c =>{
-        if(c.initialState === true) {
-          this.cookies.enabledList.push(c.identifier || this.cookies.slugify(this.getCookieFirstName(c.name)));
-        }
-      })
-    }
-    this.colorsSet = true;
-  },
-
-  watch: {
-    async locale(){
-      await this.setTexts(true);
-    }
-  }
-}
-</script>

package/components/CookieIframe.vue

@@ -1,32 +0,0 @@
-<template>
-  <client-only>
-    <iframe v-if="iframeEnabled"/>
-    <div v-else class="cookieControl__BlockedIframe">
-      <p>
-        {{ iframeText }}
-        <a href="#" @click.prevent="cookies.modal = true" v-text="cookies.text.here" v-if="cookies && cookies.text"/>
-      </p>
-    </div>
-  </client-only>
-</template>
-
-<script>
-export default {
-  name: 'CookieIframe',
-  data(){
-    return{
-      cookies: this.$cookies
-    }
-  },
-
-  computed: {
-    iframeEnabled(){
-      return this.cookies.enabled.filter(c =>{return c.name === 'functional'}).length > 0
-    },
-
-    iframeText(){
-      return this.cookies && this.cookies.text ? this.cookies.text.blockedIframe : '';
-    }
-  }
-}
-</script>

package/lib/module.js

@@ -1,74 +0,0 @@
-const path = require('path');
-import { ContextReplacementPlugin } from 'webpack';
-
-module.exports = function cookies (_options) {
-  const defaultOptions = {
-    ...this.options.cookies,
-    css: true,
-    cssPolyfill: true,
-    controlButton: true,
-    barPosition: 'bottom-full',
-    iframe: path.resolve(__dirname, '../components/CookieIframe.vue'),
-    component: path.resolve(__dirname, '../components/CookieControl.vue'),
-  }
-
-  let options = Object.assign(defaultOptions, _options);
-
-  if(options.css) this.options.css.push(path.resolve(__dirname, '../lib/styles.scss'));
-  if(this.options.globalName) options['globalName'] = this.options.globalName;
-
-  if(options.blockIframe){
-    let blockIframe = {
-      name: 'functional',
-      initialState: options.blockIframe.initialState !== undefined ? options.blockIframe.initialState : true
-    }
-
-    if(options.optional) options.optional.push(blockIframe)
-    else options.optional = [blockIframe]
-
-    this.extendBuild((config) => {
-      config.module.rules.push({
-        test: /\.vue$/,
-        loader: 'string-replace-loader',
-        exclude: /node_modules/,
-        options: {
-          multiple: [
-            { search: '<iframe', replace: '<CookieIframe', flags: 'g' },
-            { search: '</iframe>', replace: '</CookieIframe>', flags: 'g' }
-          ],
-        }
-      })
-    })
-  }
-
-  if(options.locales){
-    let regex = new RegExp(options.locales.join('|'))
-    this.extendBuild((config) => {
-      config.plugins.push(
-        new ContextReplacementPlugin(/nuxt-cookie-control[\/\\]locale$/, regex)
-      )
-    })
-  }
-
-  this.addPlugin({
-    src: path.resolve(__dirname, 'plugin.js'),
-    fileName: 'nuxt-cookie-control.js',
-    options
-  });
-
-  // Nuxt-purgecss fix
-  try {
-    if(require.resolve("nuxt-purgecss").length > 0) {
-      if(this.options.purgeCSS) {
-        if(this.options.purgeCSS.whitelistPatternsChildren) this.options.purgeCSS.whitelistPatternsChildren.push(/cookieControl/);
-        else this.options.purgeCSS.whitelistPatternsChildren = [/cookieControl/]
-      } else{
-        this.options.purgeCSS = {
-          whitelistPatternsChildren: [/cookieControl/]
-        }
-      }
-    }
-  } catch(e) {}
-}
-
-module.exports.meta = require('../package.json')

package/lib/plugin.js

@@ -1,206 +0,0 @@
-import Vue from 'vue';
-import CookieControl from <%= serialize(options.component) %>;
-import CookieIframe from <%= serialize(options.iframe) %>;
-export default(context, inject) =>{
-  let cookies = {
-    modal: false,
-    consent: false,
-    enabled: [],
-    enabledList: [],
-    optional: []
-  }
-  
-  Object.assign(cookies, <%= serialize(options) %>);
-  if(<%= serialize(options.colors) %> !== false){
-    cookies.colors = {
-      barTextColor: '#fff',
-      modalOverlay: '#000',
-      barBackground: '#000',
-      barButtonColor: '#000',
-      modalTextColor: '#000',
-      modalBackground: '#fff',
-      modalOverlayOpacity: 0.8,
-      modalButtonColor: '#fff',
-      modalUnsavedColor: '#fff',
-      barButtonHoverColor: '#fff',
-      barButtonBackground: '#fff',
-      modalButtonHoverColor: '#fff',
-      controlButtonIconColor: '#000',
-      modalButtonBackground: '#000',
-      controlButtonBackground: '#fff',
-      barButtonHoverBackground: '#333',
-      checkboxActiveBackground: '#000',
-      controlButtonIconHoverColor: '#fff',
-      checkboxInactiveBackground: '#000',
-      modalButtonHoverBackground: '#333',
-      checkboxDisabledBackground: '#ddd',
-      controlButtonHoverBackground: '#000',
-      checkboxActiveCircleBackground: '#fff',
-      checkboxInactiveCircleBackground: '#fff',
-      checkboxDisabledCircleBackground: '#fff',
-    };
-    Object.assign(cookies.colors, <%= serialize(options.colors) %>);
-  }
-  
-  let methods = {
-    get: (cookie) => {
-      if(process.browser){
-        let decodedCookie = decodeURIComponent(document.cookie);
-        let ca = decodedCookie.split(';');
-        let name = `${cookie}=`;
-        for(let i = 0; i <ca.length; i++) {
-          let c = ca[i];
-          while (c.charAt(0) == ' ') {
-            c = c.substring(1);
-          }
-          if (c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
-          }
-        }
-      }
-      return '';
-    },
-    
-    set: ({name, value='', expires='', path='/', domain}) => {
-      let domainName = domain ? domain : cookies.domain ? `.${cookies.domain}` : domain;
-      if(process.browser){
-        document.cookie = `${name}=${value};expires=${expires};path=${path}${domainName !== undefined ? `;domain=${domainName}` : ';'}`;
-      } else if(process.server){
-        context.res.setHeader('Set-Cookie', [`${name}=${value}; Expires=${expires}; Path=${path}${domainName !== undefined ? `; Domain=${domainName}` : ';'}`]);
-      }
-    },
-
-    isEnabled: (identifier) => {
-      return cookies.enabledList.includes(identifier) || cookies.enabledList.includes(cookies.slugify(identifier))
-    },
-    
-    setBlockedIframes: (content) =>{
-      let type = (typeof(content)).toLowerCase();
-      let c = type !== 'string' ? JSON.stringify(content) : content;
-      c = c.replace(/&lt;/g, '<');
-      c = c.replace(/&gt;/g, '>');
-      if(context.app.$cookies.enabled.filter(c =>{return c.name === 'functional'}).length === 0){
-        c = c.replace(/<iframe/g, `<div class='cookieControl__BlockedIframe '`);
-        c = c.replace(/<\/iframe/g, `<p>${context.app.$cookies.text.blockedIframe !== undefined ? context.app.$cookies.text.blockedIframe : ''} <a href='#' onclick='event.preventDefault(); $${cookies.globalName}.$cookies.modal = true'>${context.app.$cookies.text.here !== undefined ? context.app.$cookies.text.here: ''}</a></p></div`); 
-      }
-      return type !== 'string' ? JSON.parse(c) : c
-    },
-    
-    slugify: (str) =>{
-      str = str.replace(/^\s+|\s+$/g, '');
-      str = str.toLowerCase();
-      let from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;";
-      let to   = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";
-      for (let i = 0, l = from.length; i < l ; i++){
-        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
-      }
-      
-      str = str.replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-'); 
-    
-      return str;
-    },
-
-    remove: (name) =>{
-      if(process.browser){
-        let domain = window.location.hostname;
-        cookies.set({name, expires: 'Thu, 01 Jan 1970 00:00:00 GMT', domain });
-        for (let j = domain.split('.'); j.length;) {
-          let o = j.join('.');
-          cookies.set({name, expires: 'Thu, 01 Jan 1970 00:00:00 GMT', domain: `.${o}` });
-          j.shift();
-        }
-      }
-    },
-
-    setConsent: (isInit=false) =>{
-      cookies.consent = cookies.get('cookie_control_consent') === 'true' ? true : false;
-      cookies.enabled = [];
-      cookies.enabledList = [];
-      if(cookies.consent === true){
-        let enabledFromCookie = cookies.get('cookie_control_enabled_cookies');
-        cookies.enabled.push(...cookies.optional.filter(c => {
-          let cookieName = typeof(c.name) === 'string' ? c.name : c.name[Object.keys(c.name)[0]]
-          return enabledFromCookie.includes(c.identifier || cookies.slugify(cookieName))
-        }));
-        cookies.enabledList = cookies.enabled.length > 0 ? cookies.enabled.map(c => {
-          let cookieName = typeof(c.name) === 'string' ? c.name : c.name[Object.keys(c.name)[0]]
-          return c.identifier || cookies.slugify(cookieName)
-        }) : [];
-      }
-      
-      if(cookies.necessary) cookies.enabled.push(...cookies.necessary.filter(c => {return c.src || c.accepted}))
-
-      if(process.client && !isInit){
-        setHead();
-        clearCookies();
-        callAcceptedFunctions();
-      }
-    }
-  }
-  
-  Object.assign(cookies, methods);
-  
-  const clearCookies = () =>{
-    let disabled = cookies.optional.filter(c => {
-      let cookieName = typeof(c.name) === 'string' ? c.name : c.name[Object.keys(c.name)[0]]
-      return !cookies.enabledList.includes(c.identifier || cookies.slugify(cookieName))
-    });
-    if(disabled.length > 0){
-      disabled.forEach(c => {
-        if(c.declined) c.declined();
-        if(c.cookies && c.cookies.length > 0){
-          c.cookies.forEach(i => {
-            cookies.remove(i);
-          })
-        }
-        // if(c.src){
-        //   for(let s of [...document.head.querySelectorAll(`script[src="${c.src}"]`)]){
-        //     s.parentNode.removeChild(s)
-        //   }
-        // }
-      })
-    }
-  }
-  
-  const setHead = () =>{
-    if(cookies.enabled.length > 0){
-      let head = document.getElementsByTagName('head')[0];
-      cookies.enabled.forEach(c =>{
-        if(c.src){
-          let script = document.createElement('script');
-          script.src = c.src;
-          head.appendChild(script);
-          script.addEventListener('load', () =>{
-            if(c.accepted) c.accepted();
-          })
-        }
-      })
-    }
-  }
-  
-  const callAcceptedFunctions = () =>{
-    if(cookies.enabled.length > 0){
-      cookies.enabled.forEach(c =>{
-        if(c.accepted) c.accepted();
-      })
-    }
-  }
-
-  const capitalize = (s) =>{
-    if(typeof s !== 'string') return ''
-    return s.charAt(0).toUpperCase() + s.slice(1)
-  }
-
-  cookies.setConsent(true)
-  
-  if(process.client){
-    let globalName = capitalize(cookies.globalName) || 'Nuxt';
-    window[`on${globalName}Ready`](() => {
-      cookies.setConsent()
-    })
-  }
-
-  inject('cookies', cookies);
-  if(cookies.blockIframe) Vue.component('CookieIframe', CookieIframe);
-  Vue.component('CookieControl', CookieControl);
-}

package/lib/postinstall.js

@@ -1 +0,0 @@
-console.log('\nThank you for using nuxt-cookie-control!\nPlease consider supporting: https://ko-fi.com/darioferderber\n')