From 0bbd72431a593ffe3577cdce0f7cc152101cea3b Mon Sep 17 00:00:00 2001
From: Matteo Bilotta <me@byloth.dev>
Date: Wed, 28 Feb 2024 02:32:02 +0100
Subject: [PATCH] wip: Implementing a first playable alert from the examples...

---
 packages/core/src/vuert.ts                    | 10 +++---
 packages/docs/.vitepress/theme/index.ts       |  2 +-
 packages/docs/pages/guide/your-first-alert.md | 32 ++++++++++++++-----
 packages/docs/pages/integration/nuxt.md       |  0
 packages/docs/pages/integration/vitepress.md  |  0
 packages/docs/src/layouts/VuertLayout.vue     | 31 ++++++++++++++++++
 packages/docs/src/types/vuert.d.ts            |  9 ++++++
 7 files changed, 70 insertions(+), 14 deletions(-)
 create mode 100644 packages/docs/pages/integration/nuxt.md
 create mode 100644 packages/docs/pages/integration/vitepress.md
 create mode 100644 packages/docs/src/types/vuert.d.ts

diff --git a/packages/core/src/vuert.ts b/packages/core/src/vuert.ts
index 035b14f..e264518 100644
--- a/packages/core/src/vuert.ts
+++ b/packages/core/src/vuert.ts
@@ -57,12 +57,12 @@ export default class Vuert
                 const now = Date.now();
                 const last = this._throttlers.get(alert.id) ?? 0;
 
-                if ((now - last) > this._options.throttlingDuration)
-                {
-                    this._throttlers.set(alert.id, now);
+                this._throttlers.set(alert.id, now);
 
-                    return false;
-                }
+                if ((now - last) > this._options.throttlingDuration) { return false; }
+
+                // TODO: Debounce the alert instead of throttling it.
+                //        - Apply a maximum duration for the alert to be debounced.
 
                 return true;
             };
diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
index 8194c9a..b33ba07 100644
--- a/packages/docs/.vitepress/theme/index.ts
+++ b/packages/docs/.vitepress/theme/index.ts
@@ -11,7 +11,7 @@ const VuertTheme: Theme = {
     Layout: VuertLayout,
     enhanceApp: (ctx: EnhanceAppContext): void =>
     {
-        const vuert = createVuert({ });
+        const vuert = createVuert({ throttlingDuration: 500 });
 
         ctx.app.use(vuert);
     }
diff --git a/packages/docs/pages/guide/your-first-alert.md b/packages/docs/pages/guide/your-first-alert.md
index 702dcf1..ebd62c5 100644
--- a/packages/docs/pages/guide/your-first-alert.md
+++ b/packages/docs/pages/guide/your-first-alert.md
@@ -5,9 +5,13 @@
 
     const vuert = useVuert();
 
+    const id = Symbol("[vuert-docs]: your-first-alert");
+
     const emitAlert = () => vuert.emit({
+        id: id,
         message: "This is your first Vuert alert!",
-        timeout: 2500
+        timeout: 2500,
+        custom: "example"
     });
 </script>
 
@@ -24,23 +28,35 @@
 
 <template>
     <AlertHandler v-slot="{ alert, isOpen }">
-        <div v-if="isOpen" class="alert">
-            {{ alert.message }}
+        <div v-if="isOpen" class="alert-overlay">
+            <div class="alert">
+                {{ alert.message }}
+            </div>
         </div>
     </AlertHandler>
 </template>
 
 <style scoped>
-    .alert
+    .alert-overlay
     {
-        background-color: #E2E3E5;
-        border: 1px solid rgba(0, 0, 0, 0.5);
-        border-radius: 1rem;
-        box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, 0.5);
+        align-items: center;
+        display: flex;
+        justify-content: center;
         position: fixed;
         top: 2rem;
+        user-select: none;
+        width: 100%;
         z-index: 10;
     }
+    .alert
+    {
+        background-color: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.125);
+        border-radius: 1rem;
+        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
+        padding: 0.75rem 1rem;
+        user-select: text;
+    }
 </style>
 ```
 
diff --git a/packages/docs/pages/integration/nuxt.md b/packages/docs/pages/integration/nuxt.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/pages/integration/vitepress.md b/packages/docs/pages/integration/vitepress.md
new file mode 100644
index 0000000..e69de29
diff --git a/packages/docs/src/layouts/VuertLayout.vue b/packages/docs/src/layouts/VuertLayout.vue
index 08d725a..51da21f 100644
--- a/packages/docs/src/layouts/VuertLayout.vue
+++ b/packages/docs/src/layouts/VuertLayout.vue
@@ -22,6 +22,13 @@
                        v-bind="alert.payload" />
         </Transition>
     </AlertHandler>
+    <AlertHandler v-slot="{ alert, isOpen }" :filter="exampleFilter">
+        <div v-if="isOpen" class="alert-container">
+            <div class="example-alert">
+                {{ alert.message }}
+            </div>
+        </div>
+    </AlertHandler>
     <DefaultTheme.Layout />
     <VuertFooter />
 </template>
@@ -46,6 +53,8 @@
     const modalFilter = (a: AlertOptions<unknown>) => a.priority === "high";
     const toastFilter = (a: AlertOptions<unknown>) => a.priority === "low";
 
+    const exampleFilter = (a: AlertOptions<unknown>) => a.custom === "example";
+
     const vuert = useVuert();
 
     const emitToast = () =>
@@ -92,6 +101,28 @@
     @import "@fortawesome/fontawesome-free/scss/solid";
     @import "@fortawesome/fontawesome-free/scss/brands";
 
+    .alert-container
+    {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        position: fixed;
+        top: calc(2rem + 64px);
+        width: 100%;
+        z-index: 10;
+        user-select: none;
+
+        & > .example-alert
+        {
+            background-color: #FFFFFF;
+            border: 1px solid rgba(0, 0, 0, 0.125);
+            border-radius: 1rem;
+            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
+            padding: 0.75rem 1rem;
+            user-select: text;
+        }
+    }
+
     :root
     {
         --vuert-strong-link-color: var(--vp-c-brand-dark);
diff --git a/packages/docs/src/types/vuert.d.ts b/packages/docs/src/types/vuert.d.ts
new file mode 100644
index 0000000..855eda0
--- /dev/null
+++ b/packages/docs/src/types/vuert.d.ts
@@ -0,0 +1,9 @@
+import { AlertCustomOptions } from "@byloth/vuert";
+
+declare module "@byloth/vuert"
+{
+    export interface AlertCustomOptions
+    {
+        custom?: string;
+    }
+}