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

package/dist/module.json

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