@dargmuesli/nuxt-cookie-control 1.9.9

package/README.md

@@ -0,0 +1,285 @@
+# Nuxt Cookie Control
+![Nuxt Cookie Control](https://drive.google.com/a/broj42.com/uc?id=1FGQVyj2s0OT-gpTYxH_FuQhe6oU9iejW)
+####
+Try it out here:
+[Nuxt.js Cookie Control](https://codesandbox.io/s/vkwqmm577)
+
+## 🚀 Usage
+```bash
+npm i nuxt-cookie-control
+```
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![npm downloads][kofi-src]][kofi-href]
+
+```javascript
+//nuxt.config.js
+modules: [
+  'nuxt-cookie-control'
+]
+//or
+modules: [
+  ['nuxt-cookie-control', {
+    //your options
+  }]
+]
+
+//to open cookie modal anywhere:
+$cookies.modal = true
+//or
+this.$cookies.modal = true
+```
+```html
+<!--template-->
+<!--
+  CookieControl component is registered globally,
+  you don't need to register it anywhere.
+-->
+<CookieControl/>
+<!--or-->
+<CookieControl></CookieControl>
+```
+## Slot
+### Bar
+```html
+<CookieControl>
+  <template v-slot:bar>
+    <h3>Bar title</h3>
+    <p>Bar description (you can use $cookies.text.barDescription)</p>
+    <n-link>Go somewhere</n-link>
+  </template>
+</CookieControl>
+```
+### Modal
+```html
+<template v-slot:modal>
+  <h3>Modal title</h3>
+  <p>Modal description</p>
+</template>
+```
+### Cookie
+```html
+<template v-slot:cookie="{config}">
+  <span v-for="c in config" :key="c.id" v-text="c.cookies"/>
+</template>
+```
+
+## Props
+### Locale
+```html
+<CookieControl locale="de"/>
+```
+#### Default: en,
+#### Currently available:
+- en
+- de
+- it
+- es
+- fr
+- pt
+- hr
+- no
+- hu
+- ja
+- ru
+- uk
+
+## 🔧 Options
+Options in nuxt.config.js
+```javascript
+modules: [
+  ['nuxt-cookie-control', {
+    //default css (true)
+    //if css is set to false, you will still be able to access
+    //your color variables (example. background-color: var(--cookie-control-barBackground))
+    css: true,
+
+    //enable or disable css variables polyfill
+    cssPolyfill: true,
+
+    //in case you have subdomains (shop.yourdomain.com)
+    domain: 'yourdomain.com',
+
+    //if you want to tree-shake locales set locales you want to use
+    locales: ['en', 'de'],
+
+    //modal opener (cookie control)
+    controlButton: true,
+
+    //block iframes to prevent them from adding additional cookies
+    blockIframe: true,
+
+    //or if you want to set initialState to false (default value for initialState is true)
+    blockIframe: {
+      initialState: false
+    },
+
+    //position of cookie bar:
+    //'top-left', 'top-right', 'top-full',
+    //'bottom-left', 'bottom-right', 'bottom-full'
+    barPosition: 'bottom-full',
+
+    //default colors
+    //if you want to disable colors set colors property to false
+    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',
+      modalButtonBackground: '#000',
+      controlButtonIconColor: '#000',
+      controlButtonBackground: '#fff',
+      barButtonHoverBackground: '#333',
+      checkboxActiveBackground: '#000',
+      checkboxInactiveBackground: '#000',
+      modalButtonHoverBackground: '#333',
+      checkboxDisabledBackground: '#ddd',
+      controlButtonIconHoverColor: '#fff',
+      controlButtonHoverBackground: '#000',
+      checkboxActiveCircleBackground: '#fff',
+      checkboxInactiveCircleBackground: '#fff',
+      checkboxDisabledCircleBackground: '#fff',
+    },
+
+    //default texts
+    text: {
+      barTitle: 'Cookies',
+      barDescription: 'We use our own cookies and third-party cookies so that we can show you this website and better understand how you use it, with a view to improving the services we offer. If you continue browsing, we consider that you have accepted the cookies.',
+      acceptAll: 'Accept all',
+      declineAll: 'Delete all',
+      manageCookies: 'Manage cookies',
+      unsaved: 'You have unsaved settings',
+      close: 'Close',
+      save: 'Save',
+      necessary: 'Necessary cookies',
+      optional: 'Optional cookies',
+      functional: 'Functional cookies',
+      blockedIframe: 'To see this, please enable functional cookies',
+      here: 'here'
+    }
+  ]
+]
+
+//for multilanguage see - Multilanguage
+```
+without options (Simple)
+```javascript
+modules: [
+'nuxt-cookie-control'
+]
+```
+### Cookies
+```javascript
+modules: [
+'nuxt-cookie-control'
+]
+...
+...
+...
+cookies: {
+  necessary: [
+    {
+      //if multilanguage
+      name: {
+        en: 'Default Cookies'
+      },
+      //else
+      name:  'Default Cookies',
+      //if multilanguage
+      description: {
+        en:  'Used for cookie control.'
+      },
+      //else
+      description:  'Used for cookie control.',
+      cookies: ['cookie_control_consent', 'cookie_control_enabled_cookies']
+    }
+  ],
+  optional: [
+    {
+      name:  'Google Analitycs',
+      //if you don't set identifier, slugified name will be used
+      identifier: 'ga',
+      //if multilanguage
+      description: {
+        en:  'Google GTM is ...'
+      },
+      //else
+      description:  'Google GTM is...',
+
+      initialState: true,
+      src:  'https://www.googletagmanager.com/gtag/js?id=<API-KEY>',
+      async:  true,
+      cookies: ['_ga', '_gat', '_gid'],
+      accepted: () =>{
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({
+          'gtm.start': new Date().getTime(),
+          event: 'gtm.js'
+        });
+      },
+      declined: () =>{
+      }
+    }
+  ]
+}
+```
+### Multilanguage
+Set **locale** prop
+```html
+<CookieControl locale="de"/>
+```
+#### Default: en,
+#### Currently available:
+- en
+- de
+- it
+- es
+- fr
+- pt
+- hr
+- no
+- hu
+- ja
+- ru
+- uk
+
+If you don't like the default texts you can change them in options (**nuxt.config.js**)
+```javascript
+text: {
+  locale: {
+    en: {
+      barTitle:  'Cookies Different',
+      barDescription:  'We use our own cookies and third-party...',
+    },
+
+    de: {
+      ...
+    }
+  },
+
+  //this will override locale text
+  barTitle: 'Override Title'
+}
+```
+
+### Buy me a coffee
+[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/F1F31MWWL)
+
+
+<!-- Badges -->
+[npm-version-src]: https://badgen.net/npm/v/nuxt-cookie-control/latest
+[npm-version-href]: https://npmjs.com/package/nuxt-cookie-control
+
+[kofi-src]: https://badgen.net/badge/icon/kofi?icon=kofi&label=support
+[kofi-href]: https://ko-fi.com/darioferderber
+
+[npm-downloads-src]: https://badgen.net/npm/dm/nuxt-cookie-control
+[npm-downloads-href]: https://npmjs.com/package/nuxt-cookie-control

package/components/CookieControl.vue

@@ -0,0 +1,182 @@
+<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

@@ -0,0 +1,32 @@
+<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

@@ -0,0 +1,74 @@
+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')