radiant-docs 0.1.6 → 0.1.8

package/template/src/components/endpoint/PlaygroundButton.astro

@@ -2,7 +2,40 @@
 import { Icon } from "astro-icon/components";
 ---
 
-<div x-data="{ open: false }" class="shrink-0 ml-auto">
+<div
+  x-data={`{
+    open: false,
+    backdropInteractionStarted: false,
+    openSyncTimeoutId: null,
+    init() {
+      this.$watch('open', (isOpen) => {
+        if (this.openSyncTimeoutId) {
+          window.clearTimeout(this.openSyncTimeoutId);
+          this.openSyncTimeoutId = null;
+        }
+
+        if (!isOpen) return;
+
+        window.dispatchEvent(new CustomEvent('rd:playground-opened'));
+        this.openSyncTimeoutId = window.setTimeout(() => {
+          window.dispatchEvent(new CustomEvent('rd:playground-opened'));
+          this.openSyncTimeoutId = null;
+        }, 220);
+      });
+    },
+    onOverlayPointerDown(event) {
+      this.backdropInteractionStarted = event.target === event.currentTarget;
+    },
+    onOverlayPointerUp(event) {
+      const releasedOnOverlay = event.target === event.currentTarget;
+      if (this.backdropInteractionStarted && releasedOnOverlay) {
+        this.open = false;
+      }
+      this.backdropInteractionStarted = false;
+    }
+  }`}
+  class="shrink-0 ml-auto"
+>
   <button
     x-on:click="open = true"
     class="m-px flex items-center gap-1.5 px-4 py-[5px] text-sm font-medium rounded-lg bg-neutral-900 text-white/95 hover:text-white shadow-[inset_0_1px_0_rgb(255,255,255,0.3),0_0_0_1px_var(--color-neutral-800)] duration-200 transition-all whitespace-nowrap cursor-pointer relative before:absolute before:inset-0 before:shadow-sm before:rounded-lg before:bg-transparent"
@@ -29,13 +62,16 @@ import { Icon } from "astro-icon/components";
     <div
       x-show="open"
       x-transition
-      x-on:click="open = false"
-      class="relative z-50 flex min-h-screen items-center justify-center p-2 xs:p-4"
+      x-on:pointerdown="onOverlayPointerDown($event)"
+      x-on:pointerup="onOverlayPointerUp($event)"
+      x-on:pointercancel="backdropInteractionStarted = false"
+      class="relative z-50 flex min-h-screen items-center justify-center p-2 xs:p-4 md:p-8"
     >
       <div
         x-on:click.stop
+        x-on:pointerdown.stop="backdropInteractionStarted = false"
         x-trap.noscroll.inert="open"
-        class="relative max-w-7xl w-full rounded-xl bg-white p-4 sm:p-6 shadow-lg"
+        class="relative flex max-h-[calc(100dvh-4rem)] max-w-7xl w-full overflow-hidden rounded-xl bg-white p-4 sm:p-6 pb-0! shadow-lg"
       >
         <slot />
       </div>