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

package/dist/runtime/methods.ts

@@ -0,0 +1,190 @@
+import Cookies from 'js-cookie'
+// import { NuxtApp } from 'nuxt/dist/app/nuxt'
+import slugify from 'slugify'
+import { Ref } from 'vue'
+
+import { useCookieControl } from './composables'
+import { LOCALE_DEFAULT } from './constants'
+import { Cookie, Locale, ModuleOptions, Translatable } from './types'
+
+export const useAcceptNecessary = () => {
+  const { cookiesEnabled, isConsentGiven, moduleOptions } = useCookieControl()
+  // const nuxtApp = useNuxtApp()
+
+  return () =>
+    acceptNecessary(
+      // nuxtApp,
+      cookiesEnabled,
+      isConsentGiven,
+      moduleOptions.cookies?.necessary
+    )
+}
+
+export const acceptNecessary = (
+  // nuxtApp: NuxtApp,
+  enabled: Ref<Cookie[]>,
+  consent: Ref<boolean>,
+  necessaryCookies: Cookie[] = []
+) => {
+  const expires = new Date()
+  expires.setFullYear(expires.getFullYear() + 1)
+
+  const necessaryCookieIds = necessaryCookies.map((necessaryCookie) =>
+    getCookieId(necessaryCookie)
+  )
+
+  Cookies.set('cookie_control_enabled_cookies', necessaryCookieIds.join(','), {
+    expires,
+  })
+  Cookies.set('cookie_control_consent', 'true', { expires })
+
+  consent.value = true
+
+  if (process.client) {
+    setHead(/* nuxtApp, */ enabled.value)
+    // callAcceptedFunctions(nuxtApp, enabled.value)
+  }
+}
+
+export const useResolveTranslatable = (locale = LOCALE_DEFAULT) => {
+  return (translatable: Translatable) =>
+    resolveTranslatable(translatable, locale)
+}
+
+const resolveTranslatable = (translatable: Translatable, locale?: Locale) => {
+  if (typeof translatable === 'string') return translatable
+
+  if (!locale)
+    throw new Error('No locale given for translatable that is not a string.')
+
+  const result = translatable[locale]
+
+  if (!result)
+    throw new Error(`Could not get translation for locale ${locale}.`)
+
+  return result
+}
+
+export const useSetConsent = () => {
+  const { isConsentGiven, moduleOptions, cookiesEnabled, cookiesEnabledIds } =
+    useCookieControl()
+  // const nuxtApp = useNuxtApp()
+  return () =>
+    setConsent({
+      isInit: false,
+      // nuxtApp,
+      isConsentGiven,
+      moduleOptions,
+      cookiesEnabled,
+      cookiesEnabledIds,
+    })
+}
+
+export const setConsent = ({
+  isInit = false,
+  // nuxtApp,
+  isConsentGiven,
+  moduleOptions,
+  cookiesEnabled,
+  cookiesEnabledIds,
+}: {
+  isInit: boolean
+  // nuxtApp: NuxtApp
+  isConsentGiven: Ref<boolean | undefined>
+  moduleOptions: ModuleOptions
+  cookiesEnabled: Ref<Cookie[]>
+  cookiesEnabledIds: Ref<string[]>
+}) => {
+  isConsentGiven.value = Cookies.get('cookie_control_consent') === 'true'
+  cookiesEnabled.value = []
+  cookiesEnabledIds.value = []
+
+  if (isConsentGiven.value) {
+    const enabledFromCookie = Cookies.get('cookie_control_enabled_cookies')
+
+    cookiesEnabled.value.push(
+      ...moduleOptions.cookies.optional.filter((cookieOptional) => {
+        return enabledFromCookie?.includes(getCookieId(cookieOptional))
+      })
+    )
+  }
+
+  if (moduleOptions.cookies?.necessary)
+    cookiesEnabled.value.push(
+      ...moduleOptions.cookies.necessary.filter((c) => {
+        return c.src // || c.onAccept
+      })
+    )
+
+  cookiesEnabledIds.value = cookiesEnabled.value.map((cookieEnabled) =>
+    getCookieId(cookieEnabled)
+  )
+
+  if (process.client && !isInit) {
+    setHead(/* nuxtApp, */ cookiesEnabled.value)
+    clearCookies(
+      // nuxtApp,
+      cookiesEnabledIds.value,
+      moduleOptions.cookies.optional
+    )
+    // callAcceptedFunctions(nuxtApp, cookiesEnabled.value)
+  }
+}
+
+export const getCookieId = (cookie: Cookie) =>
+  cookie.id || slugify(resolveTranslatable(cookie.name))
+
+export const clearCookies = (
+  // nuxtApp: NuxtApp,
+  cookiesEnabledIds: string[],
+  cookiesOptional: Cookie[]
+) => {
+  const cookiesDisabled = cookiesOptional.filter(
+    (cookieOptional) => !cookiesEnabledIds.includes(getCookieId(cookieOptional))
+  )
+
+  for (const cookieDisabled of cookiesDisabled) {
+    // if (cookieDisabled.onDecline) cookieDisabled.onDecline().call(nuxtApp)
+    if (!cookieDisabled.targetCookieIds) continue
+
+    for (const cookieDisabledId of cookieDisabled.targetCookieIds) {
+      Cookies.remove(cookieDisabledId)
+    }
+
+    if (cookieDisabled.src) {
+      for (const s of [
+        ...document.head.querySelectorAll(
+          `script[src="${cookieDisabled.src}"]`
+        ),
+      ]) {
+        s.parentNode?.removeChild(s)
+      }
+    }
+  }
+}
+
+export const setHead = (/* nuxtApp: NuxtApp, */ enabledCookies: Cookie[]) => {
+  const head = document.getElementsByTagName('head')[0]
+
+  for (const cookieEnabled of enabledCookies) {
+    if (!cookieEnabled.src) continue
+
+    const script = document.createElement('script')
+    script.src = cookieEnabled.src
+    // script.addEventListener('load', () => {
+    //   if (cookieEnabled.onAccept) cookieEnabled.onAccept().call(nuxtApp)
+    // })
+    head.appendChild(script)
+  }
+}
+
+// export const callAcceptedFunctions = (
+//   nuxtApp: NuxtApp,
+//   cookiesEnabled: Cookie[]
+// ) => {
+//   for (const cookieEnabled of cookiesEnabled) {
+//     if (!cookieEnabled.onAccept) continue
+
+//     cookieEnabled.onAccept().call(nuxtApp)
+//   }
+// }

package/dist/runtime/plugin.ts

@@ -0,0 +1,35 @@
+import { setConsent } from './methods'
+import { Cookie, State } from './types'
+
+import moduleOptions from '#build/cookie-control-options'
+
+export default defineNuxtPlugin((_nuxtApp) => {
+  // const nuxtApp = useNuxtApp()
+  const isConsentGiven = ref<boolean>()
+  const cookiesEnabled = ref<Cookie[]>([])
+  const cookiesEnabledIds = ref<string[]>([])
+  const isModalActive = ref<boolean>()
+
+  const state = {
+    isConsentGiven,
+    cookiesEnabled,
+    cookiesEnabledIds,
+    isModalActive,
+    moduleOptions,
+  } as State
+
+  setConsent({
+    isInit: !process.client,
+    // nuxtApp,
+    isConsentGiven,
+    moduleOptions,
+    cookiesEnabled,
+    cookiesEnabledIds,
+  })
+
+  return {
+    provide: {
+      cookies: state,
+    },
+  }
+})

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.ts

@@ -0,0 +1,132 @@
+import { Ref } from 'vue'
+
+import en from './locale/en'
+
+export 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 enum CookieType {
+  NECESSARY = 'necessary',
+  OPTIONAL = 'optional',
+}
+
+export interface Cookie {
+  description?: Translatable
+  id?: string
+  name: Translatable
+  // onAccept?: Function
+  // onDecline?: Function
+  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 const DEFAULTS: Required<ModuleOptions> = {
+  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: [Locale.EN],
+  localeTexts: { en },
+}
+
+export interface State {
+  cookiesEnabled: Ref<Cookie[]>
+  cookiesEnabledIds: Ref<string[]>
+  isConsentGiven: Ref<boolean>
+  isModalActive: Ref<boolean>
+  moduleOptions: ModuleOptions
+}

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+
+import { ModuleOptions, ModuleHooks, ModuleRuntimeConfig, ModulePublicRuntimeConfig } from './module'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['cookieControl']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['cookieControl']?: ModuleOptions }
+  interface NuxtHooks extends ModuleHooks {}
+  interface RuntimeConfig extends ModuleRuntimeConfig {}
+  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
+}
+
+
+export { default } from './module'