@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/notifications/cookie-toast.vue

@@ -1,143 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Cookie Toast</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Lightweight cookie consent using Nuxt UI toast notifications.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Demo -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Demo</h2>
-        <p class="text-sm text-neutral-500 mb-4">Click to trigger the cookie toast notification</p>
-        <div class="flex gap-3">
-          <UButton @click="showCookieToast">Show Cookie Toast</UButton>
-          <UButton color="neutral" variant="outline" @click="resetToast">Reset</UButton>
-        </div>
-        <XMarkPrivacyCookieToast v-if="showComponent" />
-      </section>
-
-      <!-- How It Works -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">How It Works</h2>
-        <p class="text-neutral-600 dark:text-neutral-400 mb-4">
-          The CookieToast component uses the Nuxt UI <code class="px-1 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded text-sm">useToast()</code> composable to show a cookie consent notification.
-        </p>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-6">
-          <p class="text-sm font-medium mb-2">Preview:</p>
-          <div class="bg-white dark:bg-neutral-900 rounded-lg shadow-lg p-4 max-w-sm">
-            <div class="flex gap-3">
-              <UIcon name="i-lucide-cookie" class="w-5 h-5 text-neutral-600 mt-0.5" />
-              <div class="flex-1">
-                <h4 class="font-medium text-sm">We use cookies</h4>
-                <p class="text-xs text-neutral-500 mt-1">We use cookies to enhance your browsing experience...</p>
-                <div class="flex gap-2 mt-3">
-                  <UButton size="xs">Accept</UButton>
-                  <UButton size="xs" variant="outline" color="neutral">Decline</UButton>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- Usage -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Usage</h2>
-        <p class="text-neutral-600 dark:text-neutral-400 mb-4">
-          Simply include the component in your layout. It will automatically show on mount if consent hasn't been given.
-        </p>
-        <pre class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"><code>&lt;template&gt;
-  &lt;div&gt;
-    &lt;!-- Your page content --&gt;
-    &lt;NuxtPage /&gt;
-
-    &lt;!-- Cookie consent toast --&gt;
-    &lt;XMarkPrivacyCookieToast /&gt;
-  &lt;/div&gt;
-&lt;/template&gt;</code></pre>
-      </section>
-
-      <!-- Implementation -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Implementation Details</h2>
-        <ul class="space-y-3 text-neutral-600 dark:text-neutral-400">
-          <li class="flex gap-2">
-            <UIcon name="i-lucide-check" class="w-5 h-5 text-green-500 flex-shrink-0" />
-            <span>Uses localStorage key <code class="px-1 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded text-xs">gdpr-cookies-accepted</code></span>
-          </li>
-          <li class="flex gap-2">
-            <UIcon name="i-lucide-check" class="w-5 h-5 text-green-500 flex-shrink-0" />
-            <span>Only shows once per user (persists acceptance)</span>
-          </li>
-          <li class="flex gap-2">
-            <UIcon name="i-lucide-check" class="w-5 h-5 text-green-500 flex-shrink-0" />
-            <span>Non-blocking - appears as toast notification</span>
-          </li>
-          <li class="flex gap-2">
-            <UIcon name="i-lucide-check" class="w-5 h-5 text-green-500 flex-shrink-0" />
-            <span>Accept and Decline buttons with proper handling</span>
-          </li>
-        </ul>
-      </section>
-
-      <!-- Comparison -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">When to Use</h2>
-        <div class="grid md:grid-cols-3 gap-4">
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
-            <h3 class="font-medium mb-2">CookieToast</h3>
-            <p class="text-sm text-neutral-500">Minimal, non-intrusive. Best for simple cookie consent without customization options.</p>
-          </div>
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
-            <h3 class="font-medium mb-2">CookieBanner</h3>
-            <p class="text-sm text-neutral-500">Bottom banner. Good for standard compliance with accept/reject options.</p>
-          </div>
-          <div class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
-            <h3 class="font-medium mb-2">GDPR Modal</h3>
-            <p class="text-sm text-neutral-500">Full preferences modal. Required for granular category consent.</p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Cookie Toast Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- Add to your layout - shows automatically if consent not given -->
-<template>
-  <div>
-    <NuxtPage />
-    <XMarkPrivacyCookieToast />
-  </div>
-</template>
-
-<!-- The component uses useToast() internally -->
-<!-- It checks localStorage for 'gdpr-cookies-accepted' -->
-<!-- Only shows once per user until they accept/decline -->`
-
-const toast = useToast()
-const showComponent = ref(false)
-
-const showCookieToast = () => {
-  // Reset localStorage and remount component
-  localStorage.removeItem('gdpr-cookies-accepted')
-  toast.clear()
-  showComponent.value = false
-  nextTick(() => {
-    showComponent.value = true
-  })
-}
-
-const resetToast = () => {
-  localStorage.removeItem('gdpr-cookies-accepted')
-  toast.clear()
-  showComponent.value = false
-}
-</script>

package/.playground/pages/notifications/gdpr.vue

@@ -1,276 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">GDPR Preferences</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Detailed cookie consent modal with category toggles.</p>
-    </div>
-
-    <div class="p-8 space-y-12">
-      <!-- Demo -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">GDPR Modal Demo</h2>
-        <p class="text-sm text-neutral-500 mb-4">Click to open the GDPR preferences modal</p>
-        <div class="flex gap-3">
-          <XMarkPrivacyGDPR
-            :categories="categories"
-            :button="{ label: 'Open GDPR Preferences', color: 'primary', variant: 'solid' }"
-            @accept="handleAccept"
-            @reject="handleReject"
-            @save="handleSave"
-          />
-          <UButton color="neutral" variant="outline" @click="resetPreferences">Reset Preferences</UButton>
-        </div>
-      </section>
-
-      <!-- Button Object -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Button Object</h2>
-        <p class="text-sm text-neutral-500 mb-4">Configure the trigger button with a single object prop.</p>
-        <div class="flex flex-wrap gap-4">
-          <XMarkPrivacyGDPR
-            :categories="categories"
-            :button="{ label: 'Cookie Settings' }"
-          />
-          <XMarkPrivacyGDPR
-            :categories="categories"
-            :button="{ label: 'Privacy Preferences', color: 'primary', icon: 'i-lucide-shield' }"
-          />
-          <XMarkPrivacyGDPR
-            :categories="categories"
-            :button="{ label: 'Manage Cookies', size: 'lg', variant: 'ghost' }"
-          />
-        </div>
-      </section>
-
-      <!-- Custom Categories -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Custom Categories</h2>
-        <p class="text-sm text-neutral-500 mb-4">Define your own cookie categories.</p>
-        <XMarkPrivacyGDPR
-          title="Manage Your Privacy"
-          description="Choose which types of cookies you want to allow."
-          :categories="customCategories"
-          privacy-link="/privacy-policy"
-          cookie-link="/cookie-policy"
-          :button="{ label: 'Custom Categories', color: 'secondary' }"
-          @save="handleSave"
-        />
-      </section>
-
-      <!-- Custom Trigger -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Custom Trigger (Slot)</h2>
-        <p class="text-sm text-neutral-500 mb-4">Use the default slot for a completely custom trigger.</p>
-        <XMarkPrivacyGDPR :categories="categories">
-          <UButton size="lg" label="Advanced Cookie Settings" variant="outline" color="neutral" leading-icon="i-lucide-settings" />
-        </XMarkPrivacyGDPR>
-      </section>
-
-      <!-- Props -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Props</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Prop</th>
-              <th class="text-left py-3 px-4">Type</th>
-              <th class="text-left py-3 px-4">Default</th>
-              <th class="text-left py-3 px-4">Description</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">title</td><td class="py-3 px-4">String</td><td class="py-3 px-4">Privacy Preferences</td><td class="py-3 px-4">Modal title</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">description</td><td class="py-3 px-4">String</td><td class="py-3 px-4">We use cookies...</td><td class="py-3 px-4">Modal description</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">categories</td><td class="py-3 px-4">Array</td><td class="py-3 px-4">[defaults]</td><td class="py-3 px-4">Cookie category definitions</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">button</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">{}</td><td class="py-3 px-4">{ label, color, variant, size, icon }</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">privacyLink</td><td class="py-3 px-4">String</td><td class="py-3 px-4">/privacy</td><td class="py-3 px-4">Privacy policy URL</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">cookieLink</td><td class="py-3 px-4">String</td><td class="py-3 px-4">/cookies</td><td class="py-3 px-4">Cookie policy URL</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">storageKey</td><td class="py-3 px-4">String</td><td class="py-3 px-4">gdpr-preferences</td><td class="py-3 px-4">LocalStorage key</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Button Object Properties -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Button Object Properties</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Property</th>
-              <th class="text-left py-3 px-4">Type</th>
-              <th class="text-left py-3 px-4">Default</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">label</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'Cookie Settings'</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">color</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'neutral'</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">variant</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'outline'</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">size</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'md'</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">icon</td><td class="py-3 px-4">String</td><td class="py-3 px-4">'i-lucide-cookie'</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Category Structure -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Category Structure</h2>
-        <pre class="bg-neutral-100 dark:bg-neutral-800 p-4 rounded-lg text-sm overflow-x-auto"><code>categories: [
-  {
-    id: 'necessary',           // Unique identifier
-    name: 'Necessary',         // Display name
-    description: 'Essential...', // Description text
-    required: true             // Cannot be disabled
-  },
-  {
-    id: 'analytics',
-    name: 'Analytics',
-    description: 'Cookies that help...',
-    required: false            // User can toggle
-  },
-  // ... more categories
-]</code></pre>
-      </section>
-
-      <!-- Events -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Events</h2>
-        <table class="w-full text-sm">
-          <thead>
-            <tr class="border-b border-neutral-200 dark:border-neutral-700">
-              <th class="text-left py-3 px-4">Event</th>
-              <th class="text-left py-3 px-4">Payload</th>
-              <th class="text-left py-3 px-4">Description</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-            <tr><td class="py-3 px-4 font-mono text-xs">@accept</td><td class="py-3 px-4">-</td><td class="py-3 px-4">User clicked Accept All</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">@reject</td><td class="py-3 px-4">-</td><td class="py-3 px-4">User clicked Reject All</td></tr>
-            <tr><td class="py-3 px-4 font-mono text-xs">@save</td><td class="py-3 px-4">Object</td><td class="py-3 px-4">User saved preferences { categoryId: boolean, ... }</td></tr>
-          </tbody>
-        </table>
-      </section>
-
-      <!-- Default Categories -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Default Categories</h2>
-        <div class="grid md:grid-cols-2 gap-4">
-          <div v-for="cat in categories" :key="cat.id" class="p-4 rounded-lg border border-neutral-200 dark:border-neutral-700">
-            <div class="flex items-center gap-2 mb-2">
-              <h3 class="font-medium">{{ cat.name }}</h3>
-              <UBadge v-if="cat.required" label="Required" size="xs" variant="subtle" />
-            </div>
-            <p class="text-sm text-neutral-500">{{ cat.description }}</p>
-          </div>
-        </div>
-      </section>
-
-      <!-- Code Example -->
-      <section>
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="GDPR Preferences Usage" :code="codeExample" />
-      </section>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const codeExample = `<!-- With button trigger (object) -->
-<XMarkPrivacyGDPR
-  :categories="categories"
-  :button="{ label: 'Cookie Settings', color: 'neutral', icon: 'i-lucide-cookie' }"
-  @accept="handleAcceptAll"
-  @reject="handleRejectAll"
-  @save="handleSavePreferences"
-/>
-
-<!-- With custom categories -->
-<XMarkPrivacyGDPR
-  title="Manage Your Privacy"
-  description="Choose which cookies you want to allow."
-  :categories="[
-    { id: 'necessary', name: 'Necessary', description: 'Essential cookies.', required: true },
-    { id: 'analytics', name: 'Analytics', description: 'Help us understand usage.', required: false },
-    { id: 'marketing', name: 'Marketing', description: 'Used for ads.', required: false }
-  ]"
-  privacy-link="/privacy"
-  cookie-link="/cookies"
-  :button="{ label: 'Privacy Settings', icon: 'i-lucide-shield' }"
-  @save="prefs => console.log(prefs)"
-/>
-
-<!-- Custom trigger (slot) -->
-<XMarkPrivacyGDPR :categories="categories">
-  <UButton size="lg" label="Advanced Settings" leading-icon="i-lucide-settings" />
-</XMarkPrivacyGDPR>`
-
-const categories = [
-  {
-    id: 'necessary',
-    name: 'Necessary',
-    description: 'Essential cookies required for the website to function properly.',
-    required: true
-  },
-  {
-    id: 'analytics',
-    name: 'Analytics',
-    description: 'Cookies that help us understand how visitors interact with our website.',
-    required: false
-  },
-  {
-    id: 'marketing',
-    name: 'Marketing',
-    description: 'Cookies used for advertising and promotional purposes.',
-    required: false
-  },
-  {
-    id: 'preferences',
-    name: 'Preferences',
-    description: 'Cookies that remember your preferences and settings.',
-    required: false
-  }
-]
-
-const customCategories = [
-  {
-    id: 'essential',
-    name: 'Essential',
-    description: 'Core functionality like security and network management.',
-    required: true
-  },
-  {
-    id: 'performance',
-    name: 'Performance',
-    description: 'Help us measure and improve site performance.',
-    required: false
-  },
-  {
-    id: 'targeting',
-    name: 'Targeting',
-    description: 'Used by advertising partners for personalized ads.',
-    required: false
-  },
-  {
-    id: 'social',
-    name: 'Social Media',
-    description: 'Enable social sharing features and embedded content.',
-    required: false
-  }
-]
-
-const resetPreferences = () => {
-  localStorage.removeItem('gdpr-preferences')
-  localStorage.removeItem('cookie-consent')
-}
-
-const handleAccept = () => {
-  console.log('All cookies accepted')
-}
-
-const handleReject = () => {
-  console.log('Non-essential cookies rejected')
-}
-
-const handleSave = (prefs) => {
-  console.log('Preferences saved:', prefs)
-}
-</script>