@dargmuesli/nuxt-cookie-control 4.0.3 → 5.0.0-beta.2

package/README.md

@@ -162,8 +162,8 @@ isCookieIdVisible: false,
 // If css is set to false, you will still be able to access your color variables.
 isCssEnabled: true,
 
-// Switch to toggle the css variables polyfill.
-isCssPolyfillEnabled: true,
+// Switch to toggle the css variables ponyfill.
+isCssPonyfillEnabled: false,
 
 // Switch to toggle the separation of cookie name and description in the configuration modal by a dash.
 isDashInDescriptionEnabled: true,

package/dist/module.d.ts

@@ -42,7 +42,7 @@ interface ModuleOptions {
     isControlButtonEnabled: boolean;
     isCookieIdVisible: boolean;
     isCssEnabled: boolean;
-    isCssPolyfillEnabled: boolean;
+    isCssPonyfillEnabled: boolean;
     isDashInDescriptionEnabled: boolean;
     isIframeBlocked: boolean | {
         initialState: boolean;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "4.0.3",
+  "version": "5.0.0-beta.2",
   "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 = "4.0.3";
+const version = "5.0.0-beta.2";
 
 const en = {
   accept: "Accept",
@@ -63,7 +63,7 @@ const DEFAULTS = {
   isControlButtonEnabled: true,
   isCookieIdVisible: false,
   isCssEnabled: true,
-  isCssPolyfillEnabled: true,
+  isCssPonyfillEnabled: false,
   isDashInDescriptionEnabled: true,
   isIframeBlocked: false,
   domain: "",

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="
@@ -130,7 +130,7 @@
                     </li>
                   </ul>
                 </template>
-              </div>
+              </template>
               <div class="cookieControl__ModalButtons">
                 <button
                   @click="
@@ -294,7 +294,7 @@ onBeforeMount(async () => {
       variables[`cookie-control-${key}`] = `${moduleOptions.colors[key]}`
     }
 
-    if (moduleOptions.isCssPolyfillEnabled) {
+    if (moduleOptions.isCssPonyfillEnabled) {
       const module = await import('css-vars-ponyfill')
       const cssVars = module.default
       cssVars({ variables })

package/dist/runtime/styles.css

@@ -175,7 +175,6 @@
 }
 .cookieControl__Modal > div {
   font-size: initial;
-  padding-top: 80px;
 }
 .cookieControl__Modal button {
   color: var(--cookie-control-modalButtonColor);
@@ -203,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;
@@ -265,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;
@@ -278,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;
@@ -335,7 +337,7 @@
     bottom: 0;
     max-width: none;
     max-height: 100%;
-    padding: 80px 20px 20px;
+    padding: 20px;
   }
   .cookieControl__BarButtons {
     width: 100%;
@@ -352,13 +354,11 @@
   .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/dist/runtime/types.d.ts

@@ -45,7 +45,7 @@ export interface ModuleOptions {
     isControlButtonEnabled: boolean;
     isCookieIdVisible: boolean;
     isCssEnabled: boolean;
-    isCssPolyfillEnabled: boolean;
+    isCssPonyfillEnabled: boolean;
     isDashInDescriptionEnabled: boolean;
     isIframeBlocked: boolean | {
         initialState: boolean;

package/dist/runtime/types.mjs

@@ -45,7 +45,7 @@ export const DEFAULTS = {
   isControlButtonEnabled: true,
   isCookieIdVisible: false,
   isCssEnabled: true,
-  isCssPolyfillEnabled: true,
+  isCssPonyfillEnabled: false,
   isDashInDescriptionEnabled: true,
   isIframeBlocked: false,
   domain: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "4.0.3",
+  "version": "5.0.0-beta.2",
   "description": "Nuxt Cookies Control Module",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
   "maintainers": [