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

package/README.md

@@ -105,6 +105,11 @@ if (cookieControl.cookiesEnabledIds.value.includes('google-analytics')) {
 // 'top-left', 'top-right', 'top-full', 'bottom-left', 'bottom-right', 'bottom-full'
 barPosition: 'bottom-full',
 
+// Position of the cookie control button.
+// 'top-left', 'top-right', 'bottom-left', 'bottom-right'
+// @default 'bottom-right'
+controlButtonPosition: 'bottom-right',
+
 // Switch to toggle if clicking the overlay outside the configuration modal closes the modal.
 closeModalOnClickOutside: true,
 
@@ -157,10 +162,10 @@ cookieNameCookiesEnabledIds: 'ncc_e',
 cookieOptions: {
   path: '/',
   sameSite: 'strict',
-}
+},
 
 // Switch to toggle the "accept necessary" button.
-isAcceptNecessaryButtonEnabled: true
+isAcceptNecessaryButtonEnabled: true,
 
 // Switch to toggle the button that opens the configuration modal.
 isControlButtonEnabled: true,

package/dist/module.d.mts

@@ -33,6 +33,12 @@ interface LocaleStrings {
 interface ModuleOptions {
     _isPrerendered: boolean | undefined;
     barPosition: 'top-left' | 'top-right' | 'top-full' | 'bottom-left' | 'bottom-right' | 'bottom-full';
+    /**
+     * Position of the control button.
+     * 'top-left', 'top-right', 'bottom-left', 'bottom-right', or undefined.
+     * @default 'bottom-right'
+     */
+    controlButtonPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     closeModalOnClickOutside: boolean;
     colors: false | Record<string, unknown>;
     cookieExpiryOffsetMs: number;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "10.0.0-beta.1",
+  "version": "10.0.0-beta.3",
   "configKey": "cookieControl",
   "compatibility": {
     "nuxt": ">=3.0.0"

package/dist/module.mjs

@@ -49,6 +49,7 @@ const replaceCodePlugin = (config) => {
 const DEFAULTS = {
   _isPrerendered: void 0,
   barPosition: "bottom-full",
+  controlButtonPosition: "bottom-right",
   closeModalOnClickOutside: false,
   colors: {
     barBackground: "#000",
@@ -105,11 +106,11 @@ const DEFAULTS = {
 };
 
 const name = "@dargmuesli/nuxt-cookie-control";
-const version = "10.0.0-beta.1";
+const version = "10.0.0-beta.3";
 
 const resolver = createResolver(import.meta.url);
 const runtimeDir = resolver.resolve("./runtime");
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   meta: {
     name,
     version,
@@ -230,4 +231,4 @@ const pushCss = (moduleOptions, nuxt) => {
     nuxt.options.css.push(resolver.resolve(runtimeDir, "styles.css"));
 };
 
-export { module as default };
+export { module$1 as default };

package/dist/runtime/components/ClientOnlyPrerender.d.vue.ts

@@ -0,0 +1,15 @@
+declare var __VLS_1: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ClientOnlyPrerender.vue.d.ts

@@ -4,8 +4,9 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/CookieControl.d.vue.ts

@@ -0,0 +1,29 @@
+import type { Locale } from '#cookie-control/types';
+type __VLS_Props = {
+    locale?: Locale;
+};
+declare var __VLS_11: {}, __VLS_13: {}, __VLS_20: {}, __VLS_22: {
+    cookie: any;
+};
+type __VLS_Slots = {} & {
+    bar?: (props: typeof __VLS_11) => any;
+} & {
+    controlButton?: (props: typeof __VLS_13) => any;
+} & {
+    modal?: (props: typeof __VLS_20) => any;
+} & {
+    cookie?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    accept: () => void;
+    acceptPartial: () => void;
+    decline: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/CookieControl.vue

@@ -37,7 +37,10 @@
       <button
         v-if="moduleOptions.isControlButtonEnabled && isConsentGiven"
         aria-label="Cookie control"
-        class="cookieControl__ControlButton"
+        :class="[
+  'cookieControl__ControlButton',
+  `cookieControl__ControlButton--${moduleOptions.controlButtonPosition}`
+]"
         data-testid="nuxt-cookie-control-control-button"
         type="button"
         @click="isModalActive = true"
@@ -51,154 +54,156 @@
           </svg>
         </slot>
       </button>
-      <transition name="cookieControl__Modal">
-        <div
-          v-if="isModalActive"
-          class="cookieControl__Modal"
-          @click.self="onModalClick"
-        >
-          <p
-            v-if="isSaved"
-            class="cookieControl__ModalUnsaved"
-            v-text="localeStrings?.settingsUnsaved"
-          />
-          <div class="cookieControl__ModalContent">
-            <div class="cookieControl__ModalContentInner">
-              <slot name="modal" />
-              <button
-                v-if="!moduleOptions.isModalForced"
-                class="cookieControl__ModalClose"
-                type="button"
-                @click="isModalActive = false"
-                v-text="localeStrings?.close"
-              />
-              <template v-for="cookieType in CookieType" :key="cookieType">
-                <template v-if="moduleOptions.cookies[cookieType].length">
-                  <h2
-                    v-text="
+      <dialog ref="dialog" @close="isModalActive = false">
+        <transition name="cookieControl__Modal">
+          <div
+            v-if="isModalActive"
+            class="cookieControl__Modal"
+            @click.self="onModalClick"
+          >
+            <p
+              v-if="isSaved"
+              class="cookieControl__ModalUnsaved"
+              v-text="localeStrings?.settingsUnsaved"
+            />
+            <div class="cookieControl__ModalContent">
+              <div class="cookieControl__ModalContentInner">
+                <slot name="modal" />
+                <button
+                  v-if="!moduleOptions.isModalForced"
+                  class="cookieControl__ModalClose"
+                  type="button"
+                  @click="isModalActive = false"
+                  v-text="localeStrings?.close"
+                />
+                <template v-for="cookieType in CookieType" :key="cookieType">
+                  <template v-if="moduleOptions.cookies[cookieType].length">
+                    <h2
+                      v-text="
   localeStrings && (cookieType === CookieType.NECESSARY ? localeStrings.cookiesNecessary : localeStrings.cookiesOptional)
 "
-                  />
-                  <ul>
-                    <li
-                      v-for="cookie in moduleOptions.cookies[cookieType]"
-                      :key="cookie.id"
-                    >
-                      <slot name="cookie" v-bind="{ cookie }">
-                        <div class="cookieControl__ModalInputWrapper">
-                          <input
-                            v-if="
+                    />
+                    <ul>
+                      <li
+                        v-for="cookie in moduleOptions.cookies[cookieType]"
+                        :key="cookie.id"
+                      >
+                        <slot name="cookie" v-bind="{ cookie }">
+                          <div class="cookieControl__ModalInputWrapper">
+                            <input
+                              v-if="
   cookieType === CookieType.NECESSARY && cookie.name !== 'functional'
 "
-                            :id="resolveTranslatable(cookie.name, locale)"
-                            type="checkbox"
-                            disabled
-                            checked
-                          />
-                          <input
-                            v-else
-                            :id="resolveTranslatable(cookie.name, locale)"
-                            type="checkbox"
-                            :checked="
+                              :id="resolveTranslatable(cookie.name, locale)"
+                              type="checkbox"
+                              disabled
+                              checked
+                            />
+                            <input
+                              v-else
+                              :id="resolveTranslatable(cookie.name, locale)"
+                              type="checkbox"
+                              :checked="
   getCookieIds(localCookiesEnabled).includes(
     cookie.id
   )
 "
-                            @change="toggleCookie(cookie)"
-                          />
-                          <button type="button" @click="toggleButton($event)">
-                            {{ getName(cookie.name) }}
-                          </button>
-                          <label
-                            class="cookieControl__ModalCookieName"
-                            :for="resolveTranslatable(cookie.name, locale)"
-                            tabindex="0"
-                            @keydown="toggleLabel($event)"
-                          >
-                            {{ getName(cookie.name) }}
-                            <span v-if="cookie.description">
-                              {{ getDescription(cookie.description) }}
-                            </span>
-                            <span
-                              v-if="
-  moduleOptions.isCookieIdVisible && cookie.targetCookieIds
-"
-                            >
-                              <br />
-                              {{
-                                "IDs: " + cookie.targetCookieIds.map((id) => `"${id}"`).join(", ")
-                              }}
-                            </span>
-                            <template
-                              v-if="Object.entries(cookie.links || {}).length"
+                              @change="toggleCookie(cookie)"
+                            />
+                            <button type="button" @click="toggleButton($event)">
+                              {{ getName(cookie.name) }}
+                            </button>
+                            <label
+                              class="cookieControl__ModalCookieName"
+                              :for="resolveTranslatable(cookie.name, locale)"
+                              tabindex="0"
+                              @keydown="toggleLabel($event)"
                             >
+                              {{ getName(cookie.name) }}
+                              <span v-if="cookie.description">
+                                {{ getDescription(cookie.description) }}
+                              </span>
                               <span
-                                v-for="entry in Object.entries(
-  cookie.links || {}
-)"
-                                :key="entry[0]"
+                                v-if="
+  moduleOptions.isCookieIdVisible && cookie.targetCookieIds
+"
                               >
                                 <br />
-                                <NuxtLink
-                                  :to="entry[0]"
-                                  @click="
+                                {{
+                                  "IDs: " + cookie.targetCookieIds.map((id) => `"${id}"`).join(", ")
+                                }}
+                              </span>
+                              <template
+                                v-if="Object.entries(cookie.links || {}).length"
+                              >
+                                <span
+                                  v-for="entry in Object.entries(
+  cookie.links || {}
+)"
+                                  :key="entry[0]"
+                                >
+                                  <br />
+                                  <NuxtLink
+                                    :to="entry[0]"
+                                    @click="
   !entry[0].toLowerCase().startsWith('http') ? isModalActive = false : null
 "
-                                >
-                                  {{ entry[1] || entry[0] }}
-                                </NuxtLink>
-                              </span>
-                            </template>
-                          </label>
-                        </div>
-                      </slot>
-                    </li>
-                  </ul>
+                                  >
+                                    {{ entry[1] || entry[0] }}
+                                  </NuxtLink>
+                                </span>
+                              </template>
+                            </label>
+                          </div>
+                        </slot>
+                      </li>
+                    </ul>
+                  </template>
                 </template>
-              </template>
-              <div class="cookieControl__ModalButtons">
-                <button
-                  type="button"
-                  @click="
+                <div class="cookieControl__ModalButtons">
+                  <button
+                    type="button"
+                    @click="
   () => {
     acceptPartial();
     isModalActive = false;
   }
 "
-                  v-text="localeStrings?.save"
-                />
-                <button
-                  type="button"
-                  @click="
+                    v-text="localeStrings?.save"
+                  />
+                  <button
+                    type="button"
+                    @click="
   () => {
     acceptAll();
     isModalActive = false;
   }
 "
-                  v-text="localeStrings?.acceptAll"
-                />
-                <button
-                  v-if="!moduleOptions.isModalForced"
-                  type="button"
-                  @click="
+                    v-text="localeStrings?.acceptAll"
+                  />
+                  <button
+                    v-if="!moduleOptions.isModalForced"
+                    type="button"
+                    @click="
   () => {
     moduleOptions.declineAllAcceptsNecessary ? acceptNecessary() : acceptNone();
     isModalActive = false;
   }
 "
-                  v-text="localeStrings?.declineAll"
-                />
+                    v-text="localeStrings?.declineAll"
+                  />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </transition>
+        </transition>
+      </dialog>
     </aside>
   </ClientOnlyPrerender>
 </template>
 
 <script setup>
-import { ref, computed, onBeforeMount, watch } from "vue";
+import { ref, computed, onBeforeMount, watch, useTemplateRef } from "vue";
 import ClientOnlyPrerender from "#cookie-control/components/ClientOnlyPrerender.vue";
 import { COOKIE_ID_SEPARATOR } from "#cookie-control/constants";
 import {
@@ -370,6 +375,16 @@ watch(isConsentGiven, (current, _previous) => {
     cookieIsConsentGiven.value = current ? allCookieIdsString : "0";
   }
 });
+const templateRefDialog = useTemplateRef("dialog");
+watch(isModalActive, (current, previous) => {
+  if (!templateRefDialog.value) return;
+  if (!previous && current && !templateRefDialog.value.open) {
+    templateRefDialog.value.showModal();
+  }
+  if (previous && !current && templateRefDialog.value.open) {
+    templateRefDialog.value.close();
+  }
+});
 watch(
   () => locale,
   (locale2) => {

package/dist/runtime/components/CookieControl.vue.d.ts

@@ -14,12 +14,13 @@ type __VLS_Slots = {} & {
 } & {
     cookie?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     accept: () => void;
     acceptPartial: () => void;
     decline: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/CookieIframe.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    iframe?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/CookieIframe.vue.d.ts

@@ -2,8 +2,9 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     iframe?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/locale/tr.js

@@ -1,5 +1,5 @@
 export default {
-  accept: "Kabul etmek",
+  accept: "Kabul et",
   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",
@@ -7,9 +7,9 @@ export default {
   cookiesFunctional: "\u0130\u015Flevsel \xE7erezler",
   cookiesNecessary: "Gerekli \xE7erezler",
   cookiesOptional: "\u0130ste\u011Fe ba\u011Fl\u0131 \xE7erezler",
-  decline: "Reddetmek",
+  decline: "Reddet",
   declineAll: "T\xFCm\xFCn\xFC reddet",
-  here: "here",
+  here: "Burada",
   iframeBlocked: "Bunu g\xF6rmek i\xE7in l\xFCtfen i\u015Flevsel \xE7erezleri etkinle\u015Ftirin",
   manageCookies: "\xC7erezleri y\xF6net",
   save: "Kaydet",

package/dist/runtime/styles.css

@@ -1 +1 @@
-.cookieControl__Modal-enter-active,.cookieControl__Modal-leave-active{transition:opacity .25s}.cookieControl__Modal-enter,.cookieControl__Modal-leave-to{opacity:0}.cookieControl__Bar--center{left:50%;top:50%;transform:translate(-50%,-50%)}.cookieControl__Bar--bottom-full-enter-active,.cookieControl__Bar--bottom-full-leave-active,.cookieControl__Bar--bottom-left-enter-active,.cookieControl__Bar--bottom-left-leave-active,.cookieControl__Bar--bottom-right-enter-active,.cookieControl__Bar--bottom-right-leave-active,.cookieControl__Bar--center-enter-active,.cookieControl__Bar--center-leave-active,.cookieControl__Bar--top-full-enter-active,.cookieControl__Bar--top-full-leave-active,.cookieControl__Bar--top-left-enter-active,.cookieControl__Bar--top-left-leave-active,.cookieControl__Bar--top-right-enter-active,.cookieControl__Bar--top-right-leave-active{transition:transform .25s}.cookieControl__Bar--top-full-enter,.cookieControl__Bar--top-full-leave-to,.cookieControl__Bar--top-left-enter,.cookieControl__Bar--top-left-leave-to,.cookieControl__Bar--top-right-enter,.cookieControl__Bar--top-right-leave-to{transform:translateY(-100%)}.cookieControl__Bar--bottom-full-enter,.cookieControl__Bar--bottom-full-leave-to,.cookieControl__Bar--bottom-left-enter,.cookieControl__Bar--bottom-left-leave-to,.cookieControl__Bar--bottom-right-enter,.cookieControl__Bar--bottom-right-leave-to{transform:translateY(100%)}.cookieControl__Bar--center-enter,.cookieControl__Bar--center-leave-to{transform:translate(-50%,-50%) scale(.95)}.cookieControl{position:relative;z-index:100000}.cookieControl button{backface-visibility:hidden;border:0;cursor:pointer;font-size:16px;outline:0;padding:12px 20px;transition:background-color .2s,color .2s}.cookieControl__Bar{background-color:var(--cookie-control-barBackground);font-family:Arial,Helvetica Neue,Helvetica,sans-serif;position:fixed}.cookieControl__Bar h2,.cookieControl__Bar p{color:var(--cookie-control-barTextColor);max-width:900px}.cookieControl__Bar h2{font-size:20px;margin:0}.cookieControl__Bar p{font-size:16px;margin:5px 0 0}.cookieControl__Bar button{background-color:var(--cookie-control-barButtonBackground);color:var(--cookie-control-barButtonColor)}.cookieControl__Bar button:hover{background-color:var(--cookie-control-barButtonHoverBackground);color:var(--cookie-control-barButtonHoverColor)}.cookieControl__Bar button:focus{box-shadow:0 0 0 3px var(--cookie-control-focusRingColor)}.cookieControl__Bar button+button{margin-left:10px}.cookieControl__BarContainer{align-items:flex-end;display:flex;justify-content:space-between;padding:20px}.cookieControl__Bar--bottom-full,.cookieControl__Bar--top-full{left:0;right:0}.cookieControl__Bar--top-full{top:0}.cookieControl__Bar--bottom-full{bottom:0}.cookieControl__Bar--bottom-left p,.cookieControl__Bar--bottom-right p,.cookieControl__Bar--center p,.cookieControl__Bar--top-left p,.cookieControl__Bar--top-right p{max-width:400px}.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{flex-direction:column}.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{margin-top:20px}.cookieControl__Bar--top-left,.cookieControl__Bar--top-right{top:20px}.cookieControl__Bar--bottom-left,.cookieControl__Bar--bottom-right{bottom:20px}.cookieControl__Bar--bottom-left,.cookieControl__Bar--top-left{left:20px}.cookieControl__Bar--bottom-right,.cookieControl__Bar--top-right{right:20px}.cookieControl__BarButtons{display:flex}.cookieControl__Modal{bottom:0;font-size:0;left:0;position:fixed;right:0;text-align:center;top:0;z-index:1}.cookieControl__Modal:before{content:"";display:inline-block;min-height:100vh;vertical-align:middle}.cookieControl__Modal:after{background-color:var(--cookie-control-modalOverlay);bottom:0;content:"";left:0;opacity:var(--cookie-control-modalOverlayOpacity);position:absolute;right:0;top:0;z-index:-1}.cookieControl__Modal>div{font-size:medium}.cookieControl__Modal button{background-color:var(--cookie-control-modalButtonBackground);color:var(--cookie-control-modalButtonColor)}.cookieControl__Modal button:hover{background-color:var(--cookie-control-modalButtonHoverBackground);color:var(--cookie-control-modalButtonHoverColor)}.cookieControl__Modal button:focus{box-shadow:0 0 0 3px var(--cookie-control-focusRingColor)}.cookieControl__ModalContent{background-color:var(--cookie-control-modalBackground);display:inline-block;max-height:80vh;max-width:550px;overflow-y:scroll;position:relative;text-align:left;vertical-align:middle;width:100%}.cookieControl__ModalContent,.cookieControl__ModalContent :not(button){color:var(--cookie-control-modalTextColor)}.cookieControl__ModalContent h2{font-size:24px;margin:15px 0}.cookieControl__ModalContent h2:first-of-type{margin-top:0}.cookieControl__ModalContent ul{font-size:16px;list-style-type:none;padding:0}.cookieControl__ModalContent ul ul{padding:5px 56px 0}.cookieControl__ModalContent ul ul li+li{margin-top:5px}.cookieControl__ModalContent li{align-items:center}.cookieControl__ModalContent li+li{margin-top:20px}.cookieControl__ModalContent input{display:none}.cookieControl__ModalContent input:checked+button{background-color:var(--cookie-control-checkboxActiveBackground)}.cookieControl__ModalContent input:checked+button:before{background-color:var(--cookie-control-checkboxActiveCircleBackground);transform:translate3d(100%,-50%,0)}.cookieControl__ModalContent input:checked:disabled+button{background-color:var(--cookie-control-checkboxDisabledBackground)}.cookieControl__ModalContent input:checked:disabled+button:before{background-color:var(--cookie-control-checkboxDisabledCircleBackground)}.cookieControl__ModalContent input+button{backface-visibility:hidden;background-color:var(--cookie-control-checkboxInactiveBackground);border-radius:20px;display:block;font-size:0;margin-right:20px;min-height:20px;min-width:36px;position:relative;transition:background-color .2s}.cookieControl__ModalContent input+button:before{background-color:var(--cookie-control-checkboxInactiveCircleBackground);border-radius:50%;content:"";height:15px;left:3px;position:absolute;top:50%;transform:translate3d(0,-50%,0);transition:transform .2s;width:15px}.cookieControl__ModalContentInner{display:flex;flex-direction:column;gap:10px;padding:40px}.cookieControl__ModalInputWrapper{align-items:flex-start;display:flex}.cookieControl__ModalCookieName{font-weight:700;text-transform:uppercase}.cookieControl__ModalCookieName span{font-weight:400;text-transform:none}.cookieControl__ModalClose{align-self:flex-end;right:20px;top:20px}.cookieControl__ModalButtons{align-items:stretch;display:flex;gap:20px;margin-top:40px}.cookieControl__ModalUnsaved{bottom:40px;color:var(--cookie-control-modalUnsavedColor);font-size:14px;left:50%;margin:0;position:absolute;transform:translateX(-50%)}.cookieControl__BlockedIframe{border:2px solid #ddd;padding:20px}.cookieControl__BlockedIframe a,.cookieControl__BlockedIframe p{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 h2,.cookieControl__Bar p{max-width:100%}.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{bottom:0}.cookieControl__ModalContent{bottom:0;left:0;max-height:100%;max-width:none;position:absolute;right:0;top:0}.cookieControl__ModalContentInner{padding:20px}.cookieControl__BarButtons{flex-direction:column;justify-content:center;margin-top:20px;width:100%}.cookieControl__BarButtons button{width:100%}.cookieControl__BarButtons button+button{margin:10px 0 0}.cookieControl__BarContainer,.cookieControl__ModalButtons{flex-direction:column;gap:10px}.cookieControl__ModalButtons button{width:100%}}.cookieControl__ControlButton{backface-visibility:hidden;background:var(--cookie-control-controlButtonBackground);border:0;border-radius:50%;bottom:20px;box-shadow:0 0 10px rgba(0,0,0,.3);cursor:pointer;height:40px;min-height:40px;min-width:40px;outline:0;position:fixed;right:20px;transition:background-color .2s;width:40px}.cookieControl__ControlButton svg{backface-visibility:hidden;color:var(--cookie-control-controlButtonIconColor);left:50%;max-height:24px;max-width:24px;min-height:24px;min-width:24px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:color .2s}.cookieControl__ControlButton:hover{background-color:var(--cookie-control-controlButtonHoverBackground)}.cookieControl__ControlButton:hover svg{color:var(--cookie-control-controlButtonIconHoverColor)}
+.cookieControl__Modal-enter-active,.cookieControl__Modal-leave-active{transition:opacity .25s}.cookieControl__Modal-enter,.cookieControl__Modal-leave-to{opacity:0}.cookieControl__Bar--center{left:50%;top:50%;transform:translate(-50%,-50%)}.cookieControl__Bar--bottom-full-enter-active,.cookieControl__Bar--bottom-full-leave-active,.cookieControl__Bar--bottom-left-enter-active,.cookieControl__Bar--bottom-left-leave-active,.cookieControl__Bar--bottom-right-enter-active,.cookieControl__Bar--bottom-right-leave-active,.cookieControl__Bar--center-enter-active,.cookieControl__Bar--center-leave-active,.cookieControl__Bar--top-full-enter-active,.cookieControl__Bar--top-full-leave-active,.cookieControl__Bar--top-left-enter-active,.cookieControl__Bar--top-left-leave-active,.cookieControl__Bar--top-right-enter-active,.cookieControl__Bar--top-right-leave-active{transition:transform .25s}.cookieControl__Bar--top-full-enter,.cookieControl__Bar--top-full-leave-to,.cookieControl__Bar--top-left-enter,.cookieControl__Bar--top-left-leave-to,.cookieControl__Bar--top-right-enter,.cookieControl__Bar--top-right-leave-to{transform:translateY(-100%)}.cookieControl__Bar--bottom-full-enter,.cookieControl__Bar--bottom-full-leave-to,.cookieControl__Bar--bottom-left-enter,.cookieControl__Bar--bottom-left-leave-to,.cookieControl__Bar--bottom-right-enter,.cookieControl__Bar--bottom-right-leave-to{transform:translateY(100%)}.cookieControl__Bar--center-enter,.cookieControl__Bar--center-leave-to{transform:translate(-50%,-50%) scale(.95)}.cookieControl{position:relative;z-index:100000}.cookieControl button{backface-visibility:hidden;border:0;cursor:pointer;font-size:16px;outline:0;padding:12px 20px;transition:background-color .2s,color .2s}.cookieControl__Bar{background-color:var(--cookie-control-barBackground);font-family:Arial,Helvetica Neue,Helvetica,sans-serif;position:fixed}.cookieControl__Bar h2,.cookieControl__Bar p{color:var(--cookie-control-barTextColor);max-width:900px}.cookieControl__Bar h2{font-size:20px;margin:0}.cookieControl__Bar p{font-size:16px;margin:5px 0 0}.cookieControl__Bar button{background-color:var(--cookie-control-barButtonBackground);color:var(--cookie-control-barButtonColor)}.cookieControl__Bar button:hover{background-color:var(--cookie-control-barButtonHoverBackground);color:var(--cookie-control-barButtonHoverColor)}.cookieControl__Bar button:focus{box-shadow:0 0 0 3px var(--cookie-control-focusRingColor)}.cookieControl__Bar button+button{margin-left:10px}.cookieControl__BarContainer{align-items:flex-end;display:flex;justify-content:space-between;padding:20px}.cookieControl__Bar--bottom-full,.cookieControl__Bar--top-full{left:0;right:0}.cookieControl__Bar--top-full{top:0}.cookieControl__Bar--bottom-full{bottom:0}.cookieControl__Bar--bottom-left p,.cookieControl__Bar--bottom-right p,.cookieControl__Bar--center p,.cookieControl__Bar--top-left p,.cookieControl__Bar--top-right p{max-width:400px}.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{flex-direction:column}.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{margin-top:20px}.cookieControl__Bar--top-left,.cookieControl__Bar--top-right{top:20px}.cookieControl__Bar--bottom-left,.cookieControl__Bar--bottom-right{bottom:20px}.cookieControl__Bar--bottom-left,.cookieControl__Bar--top-left{left:20px}.cookieControl__Bar--bottom-right,.cookieControl__Bar--top-right{right:20px}.cookieControl__BarButtons{display:flex}.cookieControl__Modal{bottom:0;font-size:0;left:0;position:fixed;right:0;text-align:center;top:0;z-index:1}.cookieControl__Modal:before{content:"";display:inline-block;min-height:100vh;vertical-align:middle}.cookieControl__Modal:after{background-color:var(--cookie-control-modalOverlay);bottom:0;content:"";left:0;opacity:var(--cookie-control-modalOverlayOpacity);position:absolute;right:0;top:0;z-index:-1}.cookieControl__Modal>div{font-size:medium}.cookieControl__Modal button{background-color:var(--cookie-control-modalButtonBackground);color:var(--cookie-control-modalButtonColor)}.cookieControl__Modal button:hover{background-color:var(--cookie-control-modalButtonHoverBackground);color:var(--cookie-control-modalButtonHoverColor)}.cookieControl__Modal button:focus{box-shadow:0 0 0 3px var(--cookie-control-focusRingColor)}.cookieControl__ModalContent{background-color:var(--cookie-control-modalBackground);display:inline-block;max-height:80vh;max-width:550px;overflow-y:scroll;position:relative;text-align:left;vertical-align:middle;width:100%}.cookieControl__ModalContent,.cookieControl__ModalContent :not(button){color:var(--cookie-control-modalTextColor)}.cookieControl__ModalContent h2{font-size:24px;margin:15px 0}.cookieControl__ModalContent h2:first-of-type{margin-top:0}.cookieControl__ModalContent ul{font-size:16px;list-style-type:none;padding:0}.cookieControl__ModalContent ul ul{padding:5px 56px 0}.cookieControl__ModalContent ul ul li+li{margin-top:5px}.cookieControl__ModalContent li{align-items:center}.cookieControl__ModalContent li+li{margin-top:20px}.cookieControl__ModalContent input{display:none}.cookieControl__ModalContent input:checked+button{background-color:var(--cookie-control-checkboxActiveBackground)}.cookieControl__ModalContent input:checked+button:before{background-color:var(--cookie-control-checkboxActiveCircleBackground);transform:translate3d(100%,-50%,0)}.cookieControl__ModalContent input:checked:disabled+button{background-color:var(--cookie-control-checkboxDisabledBackground)}.cookieControl__ModalContent input:checked:disabled+button:before{background-color:var(--cookie-control-checkboxDisabledCircleBackground)}.cookieControl__ModalContent input+button{backface-visibility:hidden;background-color:var(--cookie-control-checkboxInactiveBackground);border-radius:20px;display:block;font-size:0;margin-right:20px;min-height:20px;min-width:36px;position:relative;transition:background-color .2s}.cookieControl__ModalContent input+button:before{background-color:var(--cookie-control-checkboxInactiveCircleBackground);border-radius:50%;content:"";height:15px;left:3px;position:absolute;top:50%;transform:translate3d(0,-50%,0);transition:transform .2s;width:15px}.cookieControl__ModalContentInner{display:flex;flex-direction:column;gap:10px;padding:40px}.cookieControl__ModalInputWrapper{align-items:flex-start;display:flex}.cookieControl__ModalCookieName{font-weight:700;text-transform:uppercase}.cookieControl__ModalCookieName span{font-weight:400;text-transform:none}.cookieControl__ModalClose{align-self:flex-end;right:20px;top:20px}.cookieControl__ModalButtons{align-items:stretch;display:flex;gap:20px;margin-top:40px}.cookieControl__ModalUnsaved{bottom:40px;color:var(--cookie-control-modalUnsavedColor);font-size:14px;left:50%;margin:0;position:absolute;transform:translateX(-50%)}.cookieControl__BlockedIframe{border:2px solid #ddd;padding:20px}.cookieControl__BlockedIframe a,.cookieControl__BlockedIframe p{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 h2,.cookieControl__Bar p{max-width:100%}.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{bottom:0}.cookieControl__ModalContent{bottom:0;left:0;max-height:100%;max-width:none;position:absolute;right:0;top:0}.cookieControl__ModalContentInner{padding:20px}.cookieControl__BarButtons{flex-direction:column;justify-content:center;margin-top:20px;width:100%}.cookieControl__BarButtons button{width:100%}.cookieControl__BarButtons button+button{margin:10px 0 0}.cookieControl__BarContainer,.cookieControl__ModalButtons{flex-direction:column;gap:10px}.cookieControl__ModalButtons button{width:100%}}.cookieControl__ControlButton{backface-visibility:hidden;background:var(--cookie-control-controlButtonBackground);border:0;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.3);cursor:pointer;height:40px;min-height:40px;min-width:40px;outline:0;position:fixed;transition:background-color .2s;width:40px}.cookieControl__ControlButton--top-left{left:20px;top:20px}.cookieControl__ControlButton--top-right{right:20px;top:20px}.cookieControl__ControlButton--bottom-left{bottom:20px;left:20px}.cookieControl__ControlButton--bottom-right{bottom:20px;right:20px}.cookieControl__ControlButton svg{backface-visibility:hidden;color:var(--cookie-control-controlButtonIconColor);left:50%;max-height:24px;max-width:24px;min-height:24px;min-width:24px;position:absolute;top:50%;transform:translate(-50%,-50%);transition:color .2s}.cookieControl__ControlButton:hover{background-color:var(--cookie-control-controlButtonHoverBackground)}.cookieControl__ControlButton:hover svg{color:var(--cookie-control-controlButtonIconHoverColor)}

package/dist/runtime/types.d.ts

@@ -35,6 +35,12 @@ export interface LocaleStrings {
 }
 export interface ModuleOptions {
     barPosition: 'top-left' | 'top-right' | 'top-full' | 'bottom-left' | 'bottom-right' | 'bottom-full';
+    /**
+     * Position of the control button.
+     * 'top-left', 'top-right', 'bottom-left' or 'bottom-right'.
+     * @default 'bottom-right'
+     */
+    controlButtonPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     closeModalOnClickOutside: boolean;
     colors: false | Record<string, unknown>;
     cookieExpiryOffsetMs: number;

package/dist/runtime/types.js

@@ -6,6 +6,7 @@ export var CookieType = /* @__PURE__ */ ((CookieType2) => {
 })(CookieType || {});
 export const DEFAULTS = {
   barPosition: "bottom-full",
+  controlButtonPosition: "bottom-right",
   closeModalOnClickOutside: false,
   colors: {
     barBackground: "#000",

package/package.json

@@ -11,30 +11,30 @@
   },
   "description": "Nuxt Cookie Control Module",
   "devDependencies": {
-    "@commitlint/cli": "19.8.1",
-    "@commitlint/config-conventional": "19.8.1",
+    "@commitlint/cli": "20.1.0",
+    "@commitlint/config-conventional": "20.0.0",
     "@dargmuesli/nuxt-cookie-control": "link:",
-    "@nuxt/eslint-config": "1.9.0",
+    "@nuxt/eslint-config": "1.10.0",
     "@nuxt/module-builder": "1.0.2",
-    "@nuxt/schema": "4.0.3",
+    "@nuxt/schema": "4.2.1",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/commit-analyzer": "13.0.1",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/github": "11.0.4",
-    "@semantic-release/npm": "12.0.2",
-    "@semantic-release/release-notes-generator": "14.0.3",
-    "eslint": "9.33.0",
+    "@semantic-release/github": "12.0.2",
+    "@semantic-release/npm": "13.1.1",
+    "@semantic-release/release-notes-generator": "14.1.0",
+    "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.4",
     "husky": "9.1.7",
-    "lint-staged": "16.1.5",
-    "nuxt": "4.0.3",
+    "lint-staged": "16.2.6",
+    "nuxt": "4.2.1",
     "prettier": "3.6.2",
-    "semantic-release": "24.2.7",
-    "vite": "7.1.3",
-    "vue": "3.5.18",
-    "vue-tsc": "3.0.5",
-    "webpack": "5.101.3"
+    "semantic-release": "25.0.2",
+    "vite": "7.2.2",
+    "vue": "3.5.24",
+    "vue-tsc": "3.1.3",
+    "webpack": "5.102.1"
   },
   "engines": {
     "node": ">=16"
@@ -63,7 +63,7 @@
     "Jonas Thelemann"
   ],
   "name": "@dargmuesli/nuxt-cookie-control",
-  "packageManager": "pnpm@10.15.0",
+  "packageManager": "pnpm@10.21.0",
   "pnpm": {
     "ignoredBuiltDependencies": [
       "@parcel/watcher",
@@ -71,7 +71,7 @@
       "unrs-resolver"
     ],
     "overrides": {
-      "@types/eslint": "npm:eslint@9.33.0"
+      "@types/eslint": "npm:eslint@9.39.1"
     }
   },
   "publishConfig": {
@@ -99,5 +99,5 @@
       ]
     }
   },
-  "version": "10.0.0-beta.1"
+  "version": "10.0.0-beta.3"
 }