@maas/vue-equipment 0.19.1 → 0.20.1

package/dist/plugins/MagicConsent/src/components/MagicConsent.vue

@@ -1,118 +0,0 @@
-<template>
-  <client-only>
-    <div class="magic-consent">
-      <div class="magic-consent__container">
-        <div class="magic-consent__body">
-          <slot />
-          <div v-show="preferencesVisible" class="magic-consent__preferences">
-            <ul class="magic-consent__cookies">
-              <li
-                v-for="cookie in cookies"
-                :key="cookie.key"
-                class="magic-consent__cookie"
-              >
-                <div class="magic-consent-checkbox">
-                  <input
-                    :id="cookie.key"
-                    type="checkbox"
-                    :checked="
-                      cookie.optional === false
-                        ? true
-                        : selectedCookies[cookie.key]
-                    "
-                    @change="toggleSelection(cookie.key)"
-                    :disabled="cookie.optional === false"
-                  />
-                </div>
-                <div>
-                  <slot :name="cookie.key" :cookie="cookie">
-                    <div class="magic-consent__cookie__content">
-                      <div class="magic-consent__cookie__title">
-                        <span v-text="cookie.title" />
-                      </div>
-                      <div
-                        v-if="cookie.text"
-                        class="magic-consent__cookie__text"
-                        v-html="cookie.text"
-                      />
-                    </div>
-                  </slot>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div class="magic-consent__footer">
-          <slot name="actions">
-            <div class="magic-consent__actions">
-              <template v-if="preferencesVisible">
-                <button
-                  class="magic-consent-button -secondary"
-                  @click="preferencesVisible = !preferencesVisible"
-                >
-                  Close
-                </button>
-                <button
-                  class="magic-consent-button -secondary"
-                  @click="acceptSelected"
-                >
-                  Accept selected
-                </button>
-              </template>
-              <template v-else>
-                <button
-                  class="magic-consent-button -secondary"
-                  @click="preferencesVisible = true"
-                >
-                  Preferences
-                </button>
-                <button class="magic-consent-button -secondary" @click="reject">
-                  Reject
-                </button>
-              </template>
-              <button class="magic-consent-button -primary" @click="accept">
-                Accept
-              </button>
-            </div>
-          </slot>
-        </div>
-      </div>
-    </div>
-  </client-only>
-</template>
-
-<script lang="ts" setup>
-import { defineConsentApi } from '../composables/private/defineConsentApi'
-import { useConsentApi } from '../composables/useConsentApi'
-import type { ConsentCookieRecord } from '../types'
-
-// Define the props and their default values
-type Props = {
-  cookies: ConsentCookieRecord[]
-  maxAge?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  maxAge: 60 * 60 * 24 * 30,
-})
-
-// Initialize the Consent API
-defineConsentApi({
-  cookies: props.cookies,
-  maxAge: props.maxAge,
-})
-
-// Use the Consent API
-const {
-  preferencesVisible,
-  selectedCookies,
-  accept,
-  acceptSelected,
-  reject,
-  toggleSelection,
-} = useConsentApi()
-</script>
-
-<style>
-:root{--magic-consent-max-width:480px;--magic-consent-max-height:calc(100vh - 2rem);--magic-consent-background-color:rgba(75,75,75,.5);--magic-consent-backdrop-filter:blur(32px);--magic-consent-color:#fff;--magic-consent-border-radius:0;--magic-consent-box-shadow:none;--magic-consent-preferences-mask:linear-gradient(0deg,hsla(0,0%,100%,0),#fff 1.5rem);--magic-consent-checkbox-size:0.875rem;--magic-consent-checkbox-border-width:1px;--magic-consent-checkbox-border-color:currentColor;--magic-consent-checkbox-border-radius:0;--magic-consent-button-width:auto;--magic-consent-button-height:2.5rem;--magic-consent-button-spacing:1rem;--magic-consent-button-border-width:1px;--magic-consent-button-border-radius:0.25rem;--magic-consent-button-backdrop-filter:none;--magic-consent-button-primary-color:#000;--magic-consent-button-primary-background-color:#fff;--magic-consent-button-primary-border-color:transparent;--magic-consent-button-secondary-color:#fff;--magic-consent-button-secondary-background-color:transparent;--magic-consent-button-secondary-border-color:transparent}.magic-consent{backdrop-filter:var(--magic-consent-backdrop-filter);-webkit-backdrop-filter:var(--magic-consent-backdrop-filter);background-color:var(--magic-consent-background-color);border-radius:var(--magic-consent-border-radius);box-shadow:var(--magic-consent-box-shadow);color:var(--magic-consent-color);max-width:var(--magic-consent-max-width);overflow:hidden}.magic-consent,.magic-consent__container{display:flex;flex-direction:column;width:100%}.magic-consent__container{max-height:var(--magic-consent-max-height)}.magic-consent__body{display:flex;flex-direction:column;gap:1rem;height:100%;mask:var(--magic-consent-preferences-mask);-webkit-mask:var(--magic-consent-preferences-mask);overflow-y:scroll;padding:1rem;width:100%;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}.magic-consent__body::-webkit-scrollbar{display:none}.magic-consent__footer{padding:1rem;width:100%}.magic-consent__preferences{flex-direction:column;height:100%}.magic-consent__actions,.magic-consent__preferences{display:flex;gap:1rem;width:100%}ul.magic-consent__cookies{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding:0}li.magic-consent__cookie{align-items:flex-start;display:flex;gap:1rem;margin:0;padding:0}.magic-consent__cookie__content{align-items:flex-start;display:flex;flex-direction:column;gap:.25rem}.magic-consent__cookie__title{display:inline-flex}.magic-consent__cookie__text{white-space:pre-line}.magic-consent-checkbox{align-items:center;display:flex;gap:.625rem}.magic-consent-checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--magic-consent-checkbox-border-width) var(--magic-consent-checkbox-border-color) solid;border-radius:var(--magic-consent-checkbox-border-radius);cursor:pointer;flex-shrink:0;height:var(--magic-consent-checkbox-size);position:relative;vertical-align:middle;width:var(--magic-consent-checkbox-size)}.magic-consent-checkbox input[type=checkbox]:checked:after{background-color:var(--magic-consent-checkbox-border-color);border-radius:var(--magic-consent-checkbox-border-radius);content:"";display:block;height:calc(var(--magic-consent-checkbox-size)/2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--magic-consent-checkbox-size)/2)}.magic-consent-checkbox:disabled{cursor:not-allowed}.magic-consent-button{align-items:center;backdrop-filter:var(--magic-consent-button-backdrop-filter);-webkit-backdrop-filter:var(--magic-consent-button-backdrop-filter);border:var(--magic-consent-button-border-width) solid;border-radius:var(--magic-consent-button-border-radius);display:inline-flex;gap:var(--magic-consent-button-spacing);height:var(--magic-consent-button-height);justify-content:center;padding:0 var(--magic-consent-button-spacing);width:var(--magic-consent-button-width)}.magic-consent-button.-primary{background-color:var(--magic-consent-button-primary-background-color);border-color:var(--magic-consent-button-primary-border-color);color:var(--magic-consent-button-primary-color)}.magic-consent-button.-secondary{background-color:var(--magic-consent-button-secondary-background-color);border-color:var(--magic-consent-button-secondary-border-color);color:var(--magic-consent-button-secondary-color)}
-</style>

package/dist/plugins/MagicConsent/src/composables/useConsentApi.d.ts

@@ -1,15 +0,0 @@
-import type { CookieConsentData } from '../types.js';
-export declare function useConsentApi(): {
-    preferencesVisible: import("vue").Ref<boolean>;
-    selectedCookies: import("vue").Ref<{
-        [key: string]: boolean;
-    }>;
-    cookieConsentData: import("vue").WritableComputedRef<CookieConsentData>;
-    toggleSelection: (key: string) => void;
-    accept: () => void;
-    acceptSelected: () => void;
-    reject: () => void;
-    onAccept: (handler: (args: CookieConsentData) => void) => void;
-    onAcceptSelected: (handler: (args: CookieConsentData) => void) => void;
-    onReject: (handler: (args: CookieConsentData) => void) => void;
-};

package/dist/plugins/MagicConsent/src/composables/useConsentEmitter.d.ts

@@ -1,15 +0,0 @@
-import type { ConsentEvents } from '../types.js';
-export declare function useConsentEmitter(): {
-    on: {
-        <Key extends keyof ConsentEvents>(type: Key, handler: import("mitt").Handler<ConsentEvents[Key]>): void;
-        (type: "*", handler: import("mitt").WildcardHandler<ConsentEvents>): void;
-    };
-    off: {
-        <Key_1 extends keyof ConsentEvents>(type: Key_1, handler?: import("mitt").Handler<ConsentEvents[Key_1]> | undefined): void;
-        (type: "*", handler: import("mitt").WildcardHandler<ConsentEvents>): void;
-    };
-    emit: {
-        <Key_2 extends keyof ConsentEvents>(type: Key_2, event: ConsentEvents[Key_2]): void;
-        <Key_3 extends keyof ConsentEvents>(type: undefined extends ConsentEvents[Key_3] ? Key_3 : never): void;
-    };
-};

package/dist/plugins/MagicConsent/src/types/index.d.ts

@@ -1,20 +0,0 @@
-export type ConsentApiDefinition = {
-    cookies: ConsentCookieRecord[];
-    maxAge?: number;
-};
-export type ConsentCookieRecord = {
-    key: string;
-    optional?: boolean;
-    title?: string;
-    text?: string;
-    [key: string]: any;
-};
-export type CookieConsentData = {
-    timestamp: number | undefined;
-    cookies: Record<string, boolean>;
-};
-export type ConsentEvents = {
-    accept: CookieConsentData;
-    reject: CookieConsentData;
-    acceptSelected: CookieConsentData;
-};