@dargmuesli/nuxt-cookie-control 1.9.9 → 2.0.0-beta.2

package/dist/runtime/styles.css

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

package/dist/runtime/types.d.ts

@@ -0,0 +1,73 @@
+import { Ref } from 'vue';
+export declare enum Locale {
+    AR = "ar",
+    DE = "de",
+    EN = "en",
+    ES = "es",
+    FR = "fr",
+    HR = "hr",
+    HU = "hu",
+    IT = "it",
+    JA = "ja",
+    NL = "nl",
+    NO = "no",
+    PT = "pt",
+    RU = "ru",
+    UK = "uk"
+}
+export type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
+export type Translatable = string | PartialRecord<Locale, string>;
+export declare enum CookieType {
+    NECESSARY = "necessary",
+    OPTIONAL = "optional"
+}
+export interface Cookie {
+    description?: Translatable;
+    id?: string;
+    name: Translatable;
+    src?: string;
+    targetCookieIds?: string[];
+}
+export interface LocaleStrings {
+    acceptAll: string;
+    acceptNecessary: string;
+    barDescription: string;
+    barTitle: string;
+    blockedIframe: string;
+    close: string;
+    declineAll: string;
+    functional: string;
+    here: string;
+    manageCookies: string;
+    necessary: string;
+    optional: string;
+    save: string;
+    unsaved: string;
+}
+export interface ModuleOptions {
+    barPosition?: 'top-left' | 'top-right' | 'top-full' | 'bottom-left' | 'bottom-right' | 'bottom-full';
+    colors?: false | Record<string, any>;
+    cookies: {
+        necessary: Cookie[];
+        optional: Cookie[];
+    };
+    isAcceptNecessaryButtonEnabled?: boolean;
+    isControlButtonEnabled?: boolean;
+    isCssEnabled?: boolean;
+    isCssPolyfillEnabled?: boolean;
+    isDashInDescriptionEnabled?: boolean;
+    isIframeBlocked?: boolean | {
+        initialState: boolean;
+    };
+    domain?: string;
+    locales: Locale[];
+    localeTexts: PartialRecord<Locale, LocaleStrings>;
+}
+export declare const DEFAULTS: Required<ModuleOptions>;
+export interface State {
+    cookiesEnabled: Ref<Cookie[]>;
+    cookiesEnabledIds: Ref<string[]>;
+    isConsentGiven: Ref<boolean>;
+    isModalActive: Ref<boolean>;
+    moduleOptions: ModuleOptions;
+}

package/dist/runtime/types.mjs

@@ -0,0 +1,66 @@
+import en from "./locale/en.mjs";
+export var Locale = /* @__PURE__ */ ((Locale2) => {
+  Locale2["AR"] = "ar";
+  Locale2["DE"] = "de";
+  Locale2["EN"] = "en";
+  Locale2["ES"] = "es";
+  Locale2["FR"] = "fr";
+  Locale2["HR"] = "hr";
+  Locale2["HU"] = "hu";
+  Locale2["IT"] = "it";
+  Locale2["JA"] = "ja";
+  Locale2["NL"] = "nl";
+  Locale2["NO"] = "no";
+  Locale2["PT"] = "pt";
+  Locale2["RU"] = "ru";
+  Locale2["UK"] = "uk";
+  return Locale2;
+})(Locale || {});
+export var CookieType = /* @__PURE__ */ ((CookieType2) => {
+  CookieType2["NECESSARY"] = "necessary";
+  CookieType2["OPTIONAL"] = "optional";
+  return CookieType2;
+})(CookieType || {});
+export const DEFAULTS = {
+  barPosition: "bottom-full",
+  colors: {
+    barBackground: "#000",
+    barButtonBackground: "#fff",
+    barButtonColor: "#000",
+    barButtonHoverBackground: "#333",
+    barButtonHoverColor: "#fff",
+    barTextColor: "#fff",
+    checkboxActiveBackground: "#000",
+    checkboxActiveCircleBackground: "#fff",
+    checkboxDisabledBackground: "#ddd",
+    checkboxDisabledCircleBackground: "#fff",
+    checkboxInactiveBackground: "#000",
+    checkboxInactiveCircleBackground: "#fff",
+    controlButtonBackground: "#fff",
+    controlButtonHoverBackground: "#000",
+    controlButtonIconColor: "#000",
+    controlButtonIconHoverColor: "#fff",
+    modalBackground: "#fff",
+    modalButtonBackground: "#000",
+    modalButtonColor: "#fff",
+    modalButtonHoverBackground: "#333",
+    modalButtonHoverColor: "#fff",
+    modalOverlay: "#000",
+    modalOverlayOpacity: 0.8,
+    modalTextColor: "#000",
+    modalUnsavedColor: "#fff"
+  },
+  cookies: {
+    necessary: [],
+    optional: []
+  },
+  isAcceptNecessaryButtonEnabled: true,
+  isControlButtonEnabled: true,
+  isCssEnabled: true,
+  isCssPolyfillEnabled: true,
+  isDashInDescriptionEnabled: true,
+  isIframeBlocked: false,
+  domain: "",
+  locales: ["en" /* EN */],
+  localeTexts: { en }
+};

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+
+import {  } from './module'
+
+
+
+export { default } from './module'

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@dargmuesli/nuxt-cookie-control",
-  "version": "1.9.9",
+  "version": "2.0.0-beta.2",
   "description": "Nuxt Cookies Control Module",
-  "license": "MIT",
   "author": "Dario Ferderber <dario.ferderber@broj42.com>",
-  "contributors": [
-    "Davor Teskera",
+  "maintainers": [
     "Jonas Thelemann"
   ],
   "keywords": [
@@ -14,29 +12,70 @@
     "nuxt cookie consent",
     "nuxt gdpr consent"
   ],
-  "main": "lib/module.js",
-  "repository": "https://gitlab.com/dargmuesli/nuxt-cookie-control",
-  "publishConfig": {
-    "access": "public"
+  "repository": "https://github.com/dargmuesli/nuxt-cookie-control",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
   },
-  "eslintIgnore": [
-    "*"
+  "main": "./dist/module.cjs",
+  "types": "./dist/module.d.ts",
+  "files": [
+    "dist/**/*",
+    "src/components",
+    "src/locale"
   ],
   "scripts": {
-    "postinstall": "node lib/postinstall.js"
+    "build": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "lint": "eslint --ext .js,.ts,.vue . && nuxi typecheck playground",
+    "prepack": "npm run build",
+    "postinstall": "nuxt-module-build --stub && nuxi prepare playground"
   },
-  "files": [
-    "lib",
-    "components",
-    "locale"
-  ],
   "dependencies": {
-    "css-vars-ponyfill": "^2.4.7",
-    "sass": "^1.43.4",
-    "sass-loader": "^10.2.0",
-    "string-replace-loader": "^2.3.0"
+    "@nuxt/kit": "3.0.0",
+    "css-vars-ponyfill": "2.4.8",
+    "js-cookie": "3.0.1",
+    "slugify": "1.6.5",
+    "string-replace-loader": "3.1.0"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "0.2.1",
+    "@nuxtjs/eslint-config-typescript": "12.0.0",
+    "@types/js-cookie": "3.0.2",
+    "eslint": "8.29.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "husky": "8.0.2",
+    "lint-staged": "13.1.0",
+    "nuxt": "3.0.0",
+    "prettier": "2.8.0",
+    "typescript": "4.9.3",
+    "vite": "3.2.5",
+    "vue": "3.2.45",
+    "vue-tsc": "1.0.11",
+    "webpack": "5.75.0"
   },
   "peerDependencies": {
-    "webpack": "^4"
+    "vite": "^3",
+    "webpack": "^5"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
+  "resolutions": {
+    "@dargmuesli/nuxt-cookie-control": "link:./"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }