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

package/README.md

@@ -4,38 +4,49 @@
 ![Nuxt Cookie Control](https://drive.google.com/a/broj42.com/uc?id=1FGQVyj2s0OT-gpTYxH_FuQhe6oU9iejW)
 
 
-Continuing Dario Ferderber's work on [gitlab.com/broj42/nuxt-cookie-control](https://gitlab.com/broj42/nuxt-cookie-control).
+✅ Translated for: ar, az, cs, da, de, en, es, fr, hr, hu, it, ja, ko, lt, nl, no, pt, ru, sk, tr and uk
 
-🚩 **Make sure to read the Migration instructions for all major version updates like [v2.0.0](https://github.com/dargmuesli/nuxt-cookie-control/releases/tag/2.0.0), [v3.0.0](https://github.com/dargmuesli/nuxt-cookie-control/releases/tag/3.0.0) and following!**
+✅ Vue 3 support
+
+✅ Components and composables are [auto-imported](https://nuxt.com/docs/guide/concepts/auto-imports)
+
+🚩 API changes since continuing Dario Ferderber's work on [gitlab.com/broj42/nuxt-cookie-control](https://gitlab.com/broj42/nuxt-cookie-control), make sure to read the README!
+
+
+## 🚀 Getting Started
 
 [![Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/dargmuesli/nuxt-cookie-control?file=playground%2Fapp.vue)
 
-## 🚀 Usage
+### Installation
 ```bash
 npm i -D @dargmuesli/nuxt-cookie-control
 yarn add -D @dargmuesli/nuxt-cookie-control
 pnpm i -D @dargmuesli/nuxt-cookie-control
 ```
 
-
+### Configuration
 ```javascript
 // nuxt.config.js
 
 modules: [
   '@dargmuesli/nuxt-cookie-control'
-]
+],
+cookieControl: {
+  // typed module options
+}
+
 // or
+
 modules: [
   ['@dargmuesli/nuxt-cookie-control', {
-    // module options
+    // untyped module options
   }]
 ]
 ```
 
-Components and composables are [auto-imported](https://nuxt.com/docs/guide/concepts/auto-imports)!
-
+### Usage
 ```html
-<!-- component.vue -->
+<!-- app.vue -->
 
 <template>
   <CookieControl locale="en" />
@@ -49,56 +60,39 @@ const {
   isModalActive,
   moduleOptions
 } = useCookieControl()
+
+// example: react to a cookie being accepted
+watch(
+  () => cookiesEnabledIds.value,
+  (current, previous) => {
+    if (
+      (!previous?.includes('google-analytics') &&
+        current?.includes('google-analytics'))
+    ) {
+      // cookie with id `google-analytics` got added
+      window.location.reload() // placeholder for your custom change handler
+    }
+  },
+  { deep: true }
+)
 </script>
 ```
-## Component Slots
-### Bar
-```html
-<CookieControl>
-  <template #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 #modal>
-  <h3>Modal title</h3>
-  <p>Modal description</p>
-</template>
-```
-### Cookie
-```html
-<template #cookie="{config}">
-  <span v-for="c in config" :key="c.id" v-text="c.cookies"/>
-</template>
-```
 
-## Props
-- locale: `['en']`
-```html
-<CookieControl locale="de"/>
+```ts
+//  plugins/analytics.client.ts
+
+// example: initialization based on enabled cookies
+const cookieControl = useCookieControl()
+
+if (cookieControl.cookiesEnabledIds.value.includes('google-analytics')) {
+    initGoogleAnalytics() // placeholder for your custom initialization
+}
 ```
 
-Currently available:
-- ar
-- de
-- en
-- es
-- fr
-- hr
-- hu
-- it
-- ja
-- nl
-- no
-- pt
-- ru
-- uk
-
-## Module Options
+
+## API
+
+### Module Options
 
 ```javascript
 // Position of cookie bar.
@@ -191,7 +185,7 @@ localeTexts: {
 }
 ```
 
-### Cookies
+#### Cookies
 
 Every property the includes a `{ en: ... }` value is a translatable property that could instead only specify a string (`'...'`) or other locales as well (`{ de: ..., uk: ... }`).
 
@@ -209,6 +203,40 @@ Every property the includes a `{ en: ... }` value is a translatable property tha
 }
 ```
 
+### Component Slots
+
+#### Bar
+```html
+<CookieControl>
+  <template #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 #modal>
+  <h3>Modal title</h3>
+  <p>Modal description</p>
+</template>
+```
+
+#### Cookie
+```html
+<template #cookie="{config}">
+  <span v-for="c in config" :key="c.id" v-text="c.cookies"/>
+</template>
+```
+
+### Props
+- locale: `['en']`
+```html
+<CookieControl locale="de"/>
+```
+
 
 <!-- Badges -->
 [npm-version-src]: https://badgen.net/npm/v/@dargmuesli/nuxt-cookie-control/latest

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
   "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.1";
+const version = "5.0.0-beta.3";
 
 const en = {
   accept: "Accept",

package/dist/runtime/components/CookieControl.vue

@@ -52,14 +52,14 @@
             v-text="localeStrings?.settingsUnsaved"
           />
           <div class="cookieControl__ModalContent">
-            <div>
+            <div class="cookieControl__ModalContentInner">
               <slot name="modal" />
               <button
                 class="cookieControl__ModalClose"
                 @click="isModalActive = false"
                 v-text="localeStrings?.close"
               />
-              <div v-for="cookieType in CookieType" :key="cookieType">
+              <template v-for="cookieType in CookieType" :key="cookieType">
                 <template v-if="moduleOptions.cookies[cookieType].length">
                   <h3
                     v-text="
@@ -80,14 +80,14 @@
                             cookieType === CookieType.NECESSARY &&
                             cookie.name !== 'functional'
                           "
-                          :id="resolveTranslatable(cookie.name)"
+                          :id="resolveTranslatable(cookie.name, props.locale)"
                           type="checkbox"
                           disabled
                           checked
                         />
                         <input
                           v-else
-                          :id="resolveTranslatable(cookie.name)"
+                          :id="resolveTranslatable(cookie.name, props.locale)"
                           type="checkbox"
                           :checked="
                             getCookieIds(localCookiesEnabled).includes(
@@ -102,7 +102,9 @@
                           "
                           @change="toogleCookie(cookie)"
                         />
-                        <label :for="resolveTranslatable(cookie.name)">
+                        <label
+                          :for="resolveTranslatable(cookie.name, props.locale)"
+                        >
                           {{ getName(cookie.name) }}
                         </label>
                         <span class="cookieControl__ModalCookieName">
@@ -128,7 +130,7 @@
                     </li>
                   </ul>
                 </template>
-              </div>
+              </template>
               <div class="cookieControl__ModalButtons">
                 <button
                   @click="
@@ -176,7 +178,7 @@ import {
   getCookieIds,
   removeCookie,
   setCookie,
-  useResolveTranslatable,
+  resolveTranslatable,
 } from '../methods'
 
 import { useCookieControl } from '#imports'
@@ -195,7 +197,6 @@ const {
   isModalActive,
   moduleOptions,
 } = useCookieControl()
-const resolveTranslatable = useResolveTranslatable(props.locale)
 
 // data
 const expires = new Date()
@@ -254,13 +255,11 @@ const toogleCookie = (cookie: Cookie) => {
 const getDescription = (description: Translatable) =>
   `${
     moduleOptions.isDashInDescriptionEnabled === false ? '' : '-'
-  } ${resolveTranslatable(description)}`
+  } ${resolveTranslatable(description, props.locale)}`
 const getName = (name: Translatable) => {
   return name === 'functional'
     ? localeStrings.value?.cookiesFunctional
-    : typeof name === 'string'
-    ? name
-    : name[props.locale]
+    : resolveTranslatable(name, props.locale)
 }
 const init = () => {
   expires.setTime(expires.getTime() + moduleOptions.cookieExpiryOffsetMs)

package/dist/runtime/locale/az.d.ts

@@ -0,0 +1,3 @@
+import { LocaleStrings } from '../types';
+declare const _default: LocaleStrings;
+export default _default;

package/dist/runtime/locale/az.mjs

@@ -0,0 +1,17 @@
+export default {
+  accept: "Q\u0259bul et",
+  acceptAll: "Ham\u0131s\u0131n\u0131 q\u0259bul et",
+  bannerDescription: "Biz \xF6z kukil\u0259rimizd\u0259n v\u0259 \xFC\xE7\xFCnc\xFC t\u0259r\u0259f kukil\u0259rind\u0259n istifad\u0259 edirik ki, biz bu veb-sayt\u0131 d\xFCzg\xFCn g\xF6st\u0259r\u0259 bil\u0259k v\u0259 t\u0259klif etdiyimiz xidm\u0259tl\u0259ri t\u0259kmill\u0259\u015Fdirm\u0259k m\u0259qs\u0259dil\u0259 bu veb-saytdan nec\u0259 istifad\u0259 olundu\u011Funu daha yax\u015F\u0131 ba\u015Fa d\xFC\u015F\u0259k. Kukid\u0259n istifad\u0259 icaz\u0259l\u0259ri il\u0259 ba\u011Fl\u0131 q\u0259rar bu bannerd\u0259 se\xE7im edildikd\u0259n sonra g\xF6r\xFCn\u0259c\u0259k kuki d\xFCym\u0259sind\u0259n istifad\u0259 etm\u0259kl\u0259 ist\u0259nil\u0259n vaxt d\u0259yi\u015Fdiril\u0259 bil\u0259r.",
+  bannerTitle: "Kukil\u0259r",
+  close: "Ba\u011Fla",
+  cookiesFunctional: "Funksional kukil\u0259r",
+  cookiesNecessary: "Z\u0259ruri kukil\u0259r",
+  cookiesOptional: "\u0130st\u0259y\u0259 ba\u011Fl\u0131 kukil\u0259r",
+  decline: "R\u0259dd et",
+  declineAll: "Ham\u0131s\u0131n\u0131 r\u0259dd et",
+  here: "burada",
+  iframeBlocked: "Bunu g\xF6rm\u0259k \xFC\xE7\xFCn funksional kukil\u0259ri aktiv edin",
+  manageCookies: "Kukil\u0259ri idar\u0259 et",
+  save: "Yadda saxla",
+  settingsUnsaved: "Yadda saxlanmam\u0131\u015F ayarlar\u0131n\u0131z var"
+};

package/dist/runtime/locale/cs.d.ts

@@ -0,0 +1,3 @@
+import { LocaleStrings } from '../types';
+declare const _default: LocaleStrings;
+export default _default;

package/dist/runtime/locale/cs.mjs

@@ -0,0 +1,17 @@
+export default {
+  accept: "P\u0159ijmout",
+  acceptAll: "P\u0159ijmout v\u0161e",
+  bannerDescription: "Pou\u017E\xEDv\xE1me soubory cookie a cookie t\u0159et\xEDch stran, abychom mohli v\u0161e spr\xE1vn\u011B zobrazovat a l\xE9pe porozum\u011Bt tomu, jak tento web pou\u017E\xEDv\xE1te, s c\xEDlem zlep\u0161it nab\xEDzen\xE9 slu\u017Eby. Rozhodnut\xED lze kdykoli zm\u011Bnit pomoc\xED tla\u010D\xEDtka cookie, kter\xE9 se zobraz\xED po proveden\xED v\xFDb\u011Bru na tomto banneru.",
+  bannerTitle: "Cookies",
+  close: "Zav\u0159\xEDt",
+  cookiesFunctional: "Obslu\u017En\xE9 cookies",
+  cookiesNecessary: "Nezbytn\xE9 cookies",
+  cookiesOptional: "Voliteln\xE9 cookies",
+  decline: "Zam\xEDtnout",
+  declineAll: "Zam\xEDtnout v\u0161e",
+  here: "zde",
+  iframeBlocked: "Chcete-li ji zobrazit, povolte obslu\u017En\xE9 cookies",
+  manageCookies: "Dal\u0161\xED informace a p\u0159izp\u016Fsoben\xED",
+  save: "Ulo\u017Eit",
+  settingsUnsaved: "M\xE1te neulo\u017Een\xE1 nastaven\xED"
+};

package/dist/runtime/locale/da.d.ts

@@ -0,0 +1,3 @@
+import { LocaleStrings } from '../types';
+declare const _default: LocaleStrings;
+export default _default;

package/dist/runtime/locale/da.mjs

@@ -0,0 +1,17 @@
+export default {
+  accept: "Accepter",
+  acceptAll: "Accepter alle",
+  bannerDescription: "Vi bruger vores egne cookies og tredjepartscookies, s\xE5 vi kan vise dig denne hjemmeside og bedre forst\xE5 hvordan du bruger den, med henblik p\xE5 at forbedre de tjenester som vi tilbyder. Du kan til enhver tid tr\xE6kke dit samtykke vedr. brug af cookies tilbage. Dette g\xF8res ved hj\xE6lp af cookie-knappen, der vises n\xE5r et valg er foretaget p\xE5 dette banner.",
+  bannerTitle: "Cookies",
+  close: "Luk",
+  cookiesFunctional: "Funktionelle cookies",
+  cookiesNecessary: "N\xF8dvendige cookies",
+  cookiesOptional: "Valgfrie cookies",
+  decline: "Afvis",
+  declineAll: "Afvis alle",
+  here: "Her",
+  iframeBlocked: "For at se dette skal du aktivere funktionelle cookies",
+  manageCookies: "L\xE6s mere og tilpas",
+  save: "Gem",
+  settingsUnsaved: "Du har indstillinger, der ikke er gemt"
+};

package/dist/runtime/locale/ko.d.ts

@@ -0,0 +1,3 @@
+import { LocaleStrings } from '../types';
+declare const _default: LocaleStrings;
+export default _default;

package/dist/runtime/locale/ko.mjs

@@ -0,0 +1,17 @@
+export default {
+  accept: "\uD5C8\uC6A9\uD558\uAE30",
+  acceptAll: "\uBAA8\uB450 \uD5C8\uC6A9\uD558\uAE30",
+  bannerDescription: "\uB2F9\uC0AC\uAC00 \uC81C\uACF5\uD558\uB294 \uC11C\uBE44\uC2A4\uB97C \uAC1C\uC120\uD558\uAE30 \uC704\uD574 \uADC0\uD558\uC5D0\uAC8C \uC774 \uC6F9\uC0AC\uC774\uD2B8\uB97C \uBCF4\uC5EC\uC8FC\uACE0 \uADC0\uD558\uC758 \uC0AC\uC6A9 \uBC29\uBC95\uC744 \uB354 \uC798 \uC774\uD574\uD560 \uC218 \uC788\uB3C4\uB85D \uC790\uCCB4 \uCFE0\uD0A4 \uBC0F \uD0C0\uC0AC \uCFE0\uD0A4\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4. \uD0D0\uC0C9\uC744 \uACC4\uC18D\uD55C\uB2E4\uBA74 \uCFE0\uD0A4\uB97C \uD5C8\uC6A9\uD55C \uAC83\uC73C\uB85C \uAC04\uC8FC\uB429\uB2C8\uB2E4.",
+  bannerTitle: "\uCFE0\uD0A4",
+  close: "\uB2EB\uAE30",
+  cookiesFunctional: "\uAE30\uB2A5\uC801 \uCFE0\uD0A4",
+  cookiesNecessary: "\uD544\uC218 \uCFE0\uD0A4\uD0A4",
+  cookiesOptional: "\uC120\uD0DD\uC801 \uCFE0\uD0A4",
+  decline: "\uAC70\uBD80\uD558\uAE30",
+  declineAll: "\uBAA8\uB450 \uAC70\uBD80\uD558\uAE30",
+  here: "\uC5EC\uAE30",
+  iframeBlocked: "\uC774 \uCF58\uD150\uCE20\uB97C \uBCFC \uC218 \uC788\uB3C4\uB85D \uAE30\uB2A5\uC801 \uCFE0\uD0A4\uB97C \uD5C8\uC6A9\uD574 \uC8FC\uC138\uC694.",
+  manageCookies: "\uCFE0\uD0A4 \uAD00\uB9AC",
+  save: "\uC800\uC7A5\uD558\uAE30",
+  settingsUnsaved: "\uBCC0\uACBD \uC0AC\uD56D\uC774 \uC800\uC7A5\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4."
+};

package/dist/runtime/locale/lt.d.ts

@@ -0,0 +1,3 @@
+import { LocaleStrings } from '../types';
+declare const _default: LocaleStrings;
+export default _default;

package/dist/runtime/locale/lt.mjs

@@ -0,0 +1,17 @@
+export default {
+  accept: "Sutinku",
+  acceptAll: "Sutinku su visais",
+  bannerDescription: "Mes naudojame savo slapukus and tre\u010Di\u0173j\u0173 \u0161ali\u0173 slapukus tam, kad gal\u0117tume geriau suprasti kaip svetain\u0117 veikia ir yra naudojama bei tobulinti savo teikiamas paslaugas. J\u016Bs bet kuriuo metu galite pakeisti sutikim\u0105 d\u0117l slapuk\u0173 naudojimo paspaud\u0119 slapuk\u0173 mygtuk\u0105 kuris atsiras kai \u0161ioje reklamjuost\u0117je padarysite pasirinkim\u0105.",
+  bannerTitle: "Slapukai",
+  close: "U\u017Edaryti",
+  cookiesFunctional: "Funkciniai slapukai",
+  cookiesNecessary: "B\u016Btinieji slapukai",
+  cookiesOptional: "Pasirinktiniai slapukai",
+  decline: "At\u0161aukti",
+  declineAll: "At\u0161aukti visk\u0105",
+  here: "\u010Dia",
+  iframeBlocked: "Nor\u0117dami matyti, leiskite naudoti funkcinius slapukus",
+  manageCookies: "Su\u017Einoti daugiau ir pritaikyti",
+  save: "I\u0161saugoti",
+  settingsUnsaved: "J\u016Bs nei\u0161saugojote vis\u0173 nustatym\u0173"
+};

package/dist/runtime/locale/sk.d.ts

@@ -0,0 +1,3 @@
+import { LocaleStrings } from '../types';
+declare const _default: LocaleStrings;
+export default _default;

package/dist/runtime/locale/sk.mjs

@@ -0,0 +1,17 @@
+export default {
+  accept: "Prija\u0165",
+  acceptAll: "Prija\u0165 v\u0161etko",
+  bannerDescription: "S\xFAbory cookie a s\xFAbory cookie tret\xEDch str\xE1n pou\u017E\xEDvame na to, aby sme mohli v\u0161etko spr\xE1vne zobrazi\u0165 a lep\u0161ie pochopi\u0165, ako pou\u017E\xEDvate t\xFAto webov\xFA lokalitu, aby sme mohli zlep\u0161i\u0165 pon\xFAkan\xE9 slu\u017Eby. Rozhodnutia m\xF4\u017Eete kedyko\u013Evek zmeni\u0165 pomocou tla\u010Didla cookie, ktor\xE9 sa zobraz\xED po vykonan\xED v\xFDberu na tomto banneri.",
+  bannerTitle: "Cookies",
+  close: "Zatvori\u0165",
+  cookiesFunctional: "Obslu\u017En\xE9 cookies",
+  cookiesNecessary: "Nevyhnutn\xE9  cookies",
+  cookiesOptional: "Volite\u013En\xE9 cookies",
+  decline: "Odmietnu\u0165",
+  declineAll: "Odmietnu\u0165 v\u0161etky",
+  here: "tu",
+  iframeBlocked: "Ak ho chcete zobrazi\u0165, povo\u013Ete obslu\u017En\xE9 cookies",
+  manageCookies: "\u010Eal\u0161ie inform\xE1cie a prisp\xF4sobenie",
+  save: "Ulo\u017Ei\u0165",
+  settingsUnsaved: "M\xE1te neulo\u017Een\xE9 nastavenia"
+};

package/dist/runtime/locale/tr.d.ts

@@ -0,0 +1,3 @@
+import { LocaleStrings } from '../types';
+declare const _default: LocaleStrings;
+export default _default;

package/dist/runtime/locale/tr.mjs

@@ -0,0 +1,17 @@
+export default {
+  accept: "Kabul etmek",
+  acceptAll: "T\xFCm\xFCn\xFC kabul et",
+  bannerDescription: "Bu web sitesini do\u011Fru bir \u015Fekilde g\xF6r\xFCnt\xFCleyebilmek ve teklifimizi geli\u015Ftirmek i\xE7in bu web sitesinin nas\u0131l kullan\u0131ld\u0131\u011F\u0131n\u0131 daha iyi anlayabilmek i\xE7in kendi ve \xFC\xE7\xFCnc\xFC taraf \xE7erezlerimizi kullan\u0131yoruz. \xC7erez kullanma izni ile ilgili karar, bu banner \xFCzerinde bir se\xE7im yap\u0131ld\u0131ktan sonra g\xF6r\xFCnen \xE7erez d\xFC\u011Fmesi arac\u0131l\u0131\u011F\u0131yla herhangi bir zamanda de\u011Fi\u015Ftirilebilir.",
+  bannerTitle: "\xC7erezler",
+  close: "Kapat",
+  cookiesFunctional: "\u0130\u015Flevsel \xE7erezler",
+  cookiesNecessary: "Gerekli \xE7erezler",
+  cookiesOptional: "\u0130ste\u011Fe ba\u011Fl\u0131 \xE7erezler",
+  decline: "Reddetmek",
+  declineAll: "T\xFCm\xFCn\xFC reddet",
+  here: "here",
+  iframeBlocked: "Bunu g\xF6rmek i\xE7in l\xFCtfen i\u015Flevsel \xE7erezleri etkinle\u015Ftirin",
+  manageCookies: "\xC7erezleri y\xF6net",
+  save: "Kaydet",
+  settingsUnsaved: "Kaydedilmemi\u015F ayarlar mevcut"
+};

package/dist/runtime/styles.css

@@ -1,7 +1,9 @@
-.cookieControl__Modal-enter-active, .cookieControl__Modal-leave-active {
+.cookieControl__Modal-enter-active,
+.cookieControl__Modal-leave-active {
   transition: opacity 0.25s;
 }
-.cookieControl__Modal-enter, .cookieControl__Modal-leave-to {
+.cookieControl__Modal-enter,
+.cookieControl__Modal-leave-to {
   opacity: 0;
 }
 .cookieControl__Bar--center {
@@ -9,16 +11,40 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
-.cookieControl__Bar--center-enter-active, .cookieControl__Bar--top-left-enter-active, .cookieControl__Bar--top-full-enter-active, .cookieControl__Bar--top-right-enter-active, .cookieControl__Bar--bottom-left-enter-active, .cookieControl__Bar--bottom-full-enter-active, .cookieControl__Bar--bottom-right-enter-active, .cookieControl__Bar--center-leave-active, .cookieControl__Bar--top-left-leave-active, .cookieControl__Bar--top-full-leave-active, .cookieControl__Bar--top-right-leave-active, .cookieControl__Bar--bottom-left-leave-active, .cookieControl__Bar--bottom-full-leave-active, .cookieControl__Bar--bottom-right-leave-active {
+.cookieControl__Bar--center-enter-active,
+.cookieControl__Bar--top-left-enter-active,
+.cookieControl__Bar--top-full-enter-active,
+.cookieControl__Bar--top-right-enter-active,
+.cookieControl__Bar--bottom-left-enter-active,
+.cookieControl__Bar--bottom-full-enter-active,
+.cookieControl__Bar--bottom-right-enter-active,
+.cookieControl__Bar--center-leave-active,
+.cookieControl__Bar--top-left-leave-active,
+.cookieControl__Bar--top-full-leave-active,
+.cookieControl__Bar--top-right-leave-active,
+.cookieControl__Bar--bottom-left-leave-active,
+.cookieControl__Bar--bottom-full-leave-active,
+.cookieControl__Bar--bottom-right-leave-active {
   transition: transform 0.25s;
 }
-.cookieControl__Bar--top-left-enter, .cookieControl__Bar--top-full-enter, .cookieControl__Bar--top-right-enter, .cookieControl__Bar--top-left-leave-to, .cookieControl__Bar--top-full-leave-to, .cookieControl__Bar--top-right-leave-to {
+.cookieControl__Bar--top-left-enter,
+.cookieControl__Bar--top-full-enter,
+.cookieControl__Bar--top-right-enter,
+.cookieControl__Bar--top-left-leave-to,
+.cookieControl__Bar--top-full-leave-to,
+.cookieControl__Bar--top-right-leave-to {
   transform: translateY(-100%);
 }
-.cookieControl__Bar--bottom-left-enter, .cookieControl__Bar--bottom-full-enter, .cookieControl__Bar--bottom-right-enter, .cookieControl__Bar--bottom-left-leave-to, .cookieControl__Bar--bottom-right-leave-to, .cookieControl__Bar--bottom-full-leave-to {
+.cookieControl__Bar--bottom-left-enter,
+.cookieControl__Bar--bottom-full-enter,
+.cookieControl__Bar--bottom-right-enter,
+.cookieControl__Bar--bottom-left-leave-to,
+.cookieControl__Bar--bottom-right-leave-to,
+.cookieControl__Bar--bottom-full-leave-to {
   transform: translateY(100%);
 }
-.cookieControl__Bar--center-enter, .cookieControl__Bar--center-leave-to {
+.cookieControl__Bar--center-enter,
+.cookieControl__Bar--center-leave-to {
   transform: translate(-50%, -50%) scale(0.95);
 }
 .cookieControl {
@@ -37,9 +63,10 @@
 .cookieControl__Bar {
   position: fixed;
   background-color: var(--cookie-control-barBackground);
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 }
-.cookieControl__Bar h3, .cookieControl__Bar p {
+.cookieControl__Bar h3,
+.cookieControl__Bar p {
   color: var(--cookie-control-barTextColor);
   max-width: 900px;
 }
@@ -68,7 +95,8 @@
   align-items: flex-end;
   justify-content: space-between;
 }
-.cookieControl__Bar--top-full, .cookieControl__Bar--bottom-full {
+.cookieControl__Bar--top-full,
+.cookieControl__Bar--bottom-full {
   left: 0;
   right: 0;
 }
@@ -78,25 +106,41 @@
 .cookieControl__Bar--bottom-full {
   bottom: 0;
 }
-.cookieControl__Bar--center p, .cookieControl__Bar--top-left p, .cookieControl__Bar--top-right p, .cookieControl__Bar--bottom-left p, .cookieControl__Bar--bottom-right p {
+.cookieControl__Bar--center p,
+.cookieControl__Bar--top-left p,
+.cookieControl__Bar--top-right p,
+.cookieControl__Bar--bottom-left p,
+.cookieControl__Bar--bottom-right p {
   max-width: 400px;
 }
-.cookieControl__Bar--center .cookieControl__BarContainer, .cookieControl__Bar--top-left .cookieControl__BarContainer, .cookieControl__Bar--top-right .cookieControl__BarContainer, .cookieControl__Bar--bottom-left .cookieControl__BarContainer, .cookieControl__Bar--bottom-right .cookieControl__BarContainer {
+.cookieControl__Bar--center .cookieControl__BarContainer,
+.cookieControl__Bar--top-left .cookieControl__BarContainer,
+.cookieControl__Bar--top-right .cookieControl__BarContainer,
+.cookieControl__Bar--bottom-left .cookieControl__BarContainer,
+.cookieControl__Bar--bottom-right .cookieControl__BarContainer {
   flex-direction: column;
 }
-.cookieControl__Bar--center .cookieControl__BarButtons, .cookieControl__Bar--top-left .cookieControl__BarButtons, .cookieControl__Bar--top-right .cookieControl__BarButtons, .cookieControl__Bar--bottom-left .cookieControl__BarButtons, .cookieControl__Bar--bottom-right .cookieControl__BarButtons {
+.cookieControl__Bar--center .cookieControl__BarButtons,
+.cookieControl__Bar--top-left .cookieControl__BarButtons,
+.cookieControl__Bar--top-right .cookieControl__BarButtons,
+.cookieControl__Bar--bottom-left .cookieControl__BarButtons,
+.cookieControl__Bar--bottom-right .cookieControl__BarButtons {
   margin-top: 20px;
 }
-.cookieControl__Bar--top-left, .cookieControl__Bar--top-right {
+.cookieControl__Bar--top-left,
+.cookieControl__Bar--top-right {
   top: 20px;
 }
-.cookieControl__Bar--bottom-left, .cookieControl__Bar--bottom-right {
+.cookieControl__Bar--bottom-left,
+.cookieControl__Bar--bottom-right {
   bottom: 20px;
 }
-.cookieControl__Bar--top-left, .cookieControl__Bar--bottom-left {
+.cookieControl__Bar--top-left,
+.cookieControl__Bar--bottom-left {
   left: 20px;
 }
-.cookieControl__Bar--top-right, .cookieControl__Bar--bottom-right {
+.cookieControl__Bar--top-right,
+.cookieControl__Bar--bottom-right {
   right: 20px;
 }
 .cookieControl__BarButtons {
@@ -113,14 +157,14 @@
   text-align: center;
 }
 .cookieControl__Modal:before {
-  content: "";
+  content: '';
   min-height: 100vh;
   display: inline-block;
   vertical-align: middle;
 }
 .cookieControl__Modal:after {
   position: absolute;
-  content: "";
+  content: '';
   top: 0;
   left: 0;
   right: 0;
@@ -131,7 +175,6 @@
 }
 .cookieControl__Modal > div {
   font-size: initial;
-  padding-top: 80px;
 }
 .cookieControl__Modal button {
   color: var(--cookie-control-modalButtonColor);
@@ -159,7 +202,7 @@
 }
 .cookieControl__ModalContent h3 {
   font-size: 24px;
-  margin: 50px 0 25px;
+  margin: 15px 0px;
 }
 .cookieControl__ModalContent h3:first-of-type {
   margin-top: 0;
@@ -211,7 +254,7 @@
 }
 .cookieControl__ModalContent label:before {
   position: absolute;
-  content: "";
+  content: '';
   top: 50%;
   left: 3px;
   width: 15px;
@@ -221,6 +264,11 @@
   transform: translate3d(0, -50%, 0);
   background-color: var(--cookie-control-checkboxInactiveCircleBackground);
 }
+.cookieControl__ModalContentInner {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 .cookieControl__ModalInputWrapper {
   display: flex;
   align-items: flex-start;
@@ -234,17 +282,15 @@
   text-transform: none;
 }
 .cookieControl__ModalClose {
-  position: absolute;
+  align-self: flex-end;
   top: 20px;
   right: 20px;
 }
 .cookieControl__ModalButtons {
   display: flex;
-  margin-top: 80px;
-  align-items: flex-start;
-}
-.cookieControl__ModalButtons button + button {
-  margin-left: 20px;
+  margin-top: 40px;
+  align-items: stretch;
+  gap: 20px;
 }
 .cookieControl__ModalUnsaved {
   position: absolute;
@@ -259,24 +305,30 @@
   padding: 20px;
   border: 2px solid #ddd;
 }
-.cookieControl__BlockedIframe p, .cookieControl__BlockedIframe a {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+.cookieControl__BlockedIframe p,
+.cookieControl__BlockedIframe a {
+  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 }
 @media screen and (max-width: 768px) {
   .cookieControl__Bar {
     flex-direction: column;
     left: 0;
     right: 0;
- }
-  .cookieControl__Bar p, .cookieControl__Bar h3 {
+  }
+  .cookieControl__Bar p,
+  .cookieControl__Bar h3 {
     max-width: 100%;
- }
-  .cookieControl__Bar--top-full, .cookieControl__Bar--top-left, .cookieControl__Bar--top-right {
+  }
+  .cookieControl__Bar--top-full,
+  .cookieControl__Bar--top-left,
+  .cookieControl__Bar--top-right {
     top: 0;
- }
-  .cookieControl__Bar--bottom-full, .cookieControl__Bar--bottom-left, .cookieControl__Bar--bottom-right {
+  }
+  .cookieControl__Bar--bottom-full,
+  .cookieControl__Bar--bottom-left,
+  .cookieControl__Bar--bottom-right {
     bottom: 0;
- }
+  }
   .cookieControl__ModalContent {
     position: absolute;
     top: 0;
@@ -285,29 +337,28 @@
     bottom: 0;
     max-width: none;
     max-height: 100%;
-    padding: 80px 20px 20px;
- }
+    padding: 20px;
+  }
   .cookieControl__BarButtons {
     width: 100%;
     margin-top: 20px;
     flex-direction: column;
     justify-content: center;
- }
+  }
   .cookieControl__BarButtons button {
     width: 100%;
- }
+  }
   .cookieControl__BarButtons button + button {
     margin: 10px 0 0;
- }
-  .cookieControl__BarContainer, .cookieControl__ModalButtons {
+  }
+  .cookieControl__BarContainer,
+  .cookieControl__ModalButtons {
     flex-direction: column;
- }
+    gap: 0;
+  }
   .cookieControl__ModalButtons button {
     width: 100%;
- }
-  .cookieControl__ModalButtons button + button {
-    margin: 10px 0 0;
- }
+  }
 }
 .cookieControl__ControlButton {
   position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
   "description": "Nuxt Cookies Control Module",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
   "maintainers": [
@@ -36,33 +36,31 @@
     "lint": "pnpm prepack && eslint --ext .js,.ts,.vue . && nuxi typecheck playground"
   },
   "dependencies": {
-    "@nuxt/kit": "3.1.1",
-    "@sindresorhus/slugify": "2.1.1",
+    "@nuxt/kit": "3.2.2",
+    "@sindresorhus/slugify": "2.2.0",
     "css-vars-ponyfill": "2.4.8",
     "js-cookie": "3.0.1",
     "string-replace-loader": "3.1.0"
   },
   "devDependencies": {
+    "@dargmuesli/nuxt-cookie-control": "link:.",
     "@nuxt/module-builder": "0.2.1",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
-    "@types/js-cookie": "3.0.2",
-    "eslint": "8.33.0",
+    "@types/js-cookie": "3.0.3",
+    "eslint": "8.34.0",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-prettier": "4.2.1",
     "husky": "8.0.3",
-    "lint-staged": "13.1.0",
-    "nuxt": "3.1.1",
-    "prettier": "2.8.3",
-    "typescript": "4.9.4",
-    "vue": "3.2.45",
-    "vue-tsc": "1.0.24",
+    "lint-staged": "13.1.2",
+    "nuxt": "3.2.2",
+    "prettier": "2.8.4",
+    "typescript": "4.9.5",
+    "vue": "3.2.47",
+    "vue-tsc": "1.1.7",
     "webpack": "5.75.0"
   },
-  "resolutions": {
-    "@dargmuesli/nuxt-cookie-control": "link:./"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "scheduleVersion": "2.2.2"
+  "scheduleVersion": "4.4.1"
 }