drab 7.0.3 → 8.0.0

package/dist/dialog/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,iBAAiB,EAGtB,KAAK,iBAAiB,EACtB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB,EAAE,iBAAiB;IAC7E,6CAA6C;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,uDAAuD;IACvD,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,MAAO,SAAQ,WAA6B;;;IA8BxD,6CAA6C;IAC7C,IAAI;IAKJ,yCAAyC;IACzC,KAAK;IAKL,oEAAoE;IACpE,MAAM;IAKG,KAAK;CAoCd"}

package/dist/dialog/index.js

@@ -1,90 +0,0 @@
-import { Content, Lifecycle, Trigger, } from "../base/index.js";
-/**
- * Provides triggers for the `HTMLDialogElement`.
- *
- * ### Attributes
- *
- * `click-outside-close`
- *
- * By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
- * Add a `click-outside-close` attribute to close when the user clicks outside.
- *
- * If the dialog covers the full viewport and this attribute is present, the first child
- * of the dialog will be assumed to be the content of the dialog and the dialog will close
- * if there is a click outside of the first child element.
- *
- * `remove-body-scroll`
- *
- * Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
- * is open.
- */
-export class Dialog extends Lifecycle(Trigger(Content())) {
-    constructor() {
-        super();
-    }
-    /** The `HTMLDialogElement` within the element. */
-    get #dialog() {
-        return this.content(HTMLDialogElement);
-    }
-    get #removeBodyScroll() {
-        return this.hasAttribute("remove-body-scroll");
-    }
-    get #clickOutsideClose() {
-        return this.hasAttribute("click-outside-close");
-    }
-    get #scrollbarWidth() {
-        return window.innerWidth - document.documentElement.clientWidth;
-    }
-    /** Remove scroll from the body when open with the `remove-body-scroll` attribute. */
-    #toggleBodyScroll(show) {
-        if (this.#removeBodyScroll) {
-            document.documentElement.style.scrollbarGutter = "stable";
-            document.body.style.overflow = show ? "hidden" : "";
-        }
-    }
-    /** Wraps `HTMLDialogElement.showModal()`. */
-    show() {
-        this.#dialog.showModal();
-        this.#toggleBodyScroll(true);
-    }
-    /** Wraps `HTMLDialogElement.close()`. */
-    close() {
-        this.#toggleBodyScroll(false);
-        this.#dialog.close();
-    }
-    /** `show` or `close` depending on the dialog's `open` attribute. */
-    toggle() {
-        if (this.#dialog.open)
-            this.close();
-        else
-            this.show();
-    }
-    mount() {
-        this.listener(() => this.toggle());
-        this.safeListener("keydown", (e) => {
-            if (e.key === "Escape" && this.#dialog.open) {
-                e.preventDefault();
-                this.close();
-            }
-        });
-        if (this.#clickOutsideClose) {
-            // https://blog.webdevsimplified.com/2023-04/html-dialog/#close-on-outside-click
-            this.#dialog.addEventListener("click", (e) => {
-                let rect = this.#dialog.getBoundingClientRect();
-                // If dialog covers full viewport, use first child element for hit testing
-                // Example: https://picocss.com/docs/modal
-                if (window.innerWidth - rect.width <= this.#scrollbarWidth + 3 &&
-                    window.innerHeight - rect.height <= 3 &&
-                    this.#dialog.firstElementChild) {
-                    rect = this.#dialog.firstElementChild.getBoundingClientRect();
-                }
-                if (e.clientX < rect.left ||
-                    e.clientX > rect.right ||
-                    e.clientY < rect.top ||
-                    e.clientY > rect.bottom) {
-                    this.close();
-                }
-            });
-        }
-    }
-}

package/src/dialog/define.ts

@@ -1,4 +0,0 @@
-import { define } from "../util/define.js";
-import { Dialog } from "./index.js";
-
-define("drab-dialog", Dialog);

package/src/dialog/index.ts

@@ -1,120 +0,0 @@
-import {
-	Content,
-	type ContentAttributes,
-	Lifecycle,
-	Trigger,
-	type TriggerAttributes,
-} from "../base/index.js";
-
-export interface DialogAttributes extends TriggerAttributes, ContentAttributes {
-	/** Close the dialog when clicked outside. */
-	"click-outside-close"?: boolean;
-
-	/** Remove scroll from the body when dialog is open. */
-	"remove-body-scroll"?: boolean;
-}
-
-/**
- * Provides triggers for the `HTMLDialogElement`.
- *
- * ### Attributes
- *
- * `click-outside-close`
- *
- * By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
- * Add a `click-outside-close` attribute to close when the user clicks outside.
- *
- * If the dialog covers the full viewport and this attribute is present, the first child
- * of the dialog will be assumed to be the content of the dialog and the dialog will close
- * if there is a click outside of the first child element.
- *
- * `remove-body-scroll`
- *
- * Add the `remove-body-scroll` attribute to remove the scroll from `document.body` when the dialog
- * is open.
- */
-export class Dialog extends Lifecycle(Trigger(Content())) {
-	constructor() {
-		super();
-	}
-
-	/** The `HTMLDialogElement` within the element. */
-	get #dialog() {
-		return this.content(HTMLDialogElement);
-	}
-
-	get #removeBodyScroll() {
-		return this.hasAttribute("remove-body-scroll");
-	}
-
-	get #clickOutsideClose() {
-		return this.hasAttribute("click-outside-close");
-	}
-
-	get #scrollbarWidth() {
-		return window.innerWidth - document.documentElement.clientWidth;
-	}
-
-	/** Remove scroll from the body when open with the `remove-body-scroll` attribute. */
-	#toggleBodyScroll(show: boolean) {
-		if (this.#removeBodyScroll) {
-			document.documentElement.style.scrollbarGutter = "stable";
-			document.body.style.overflow = show ? "hidden" : "";
-		}
-	}
-
-	/** Wraps `HTMLDialogElement.showModal()`. */
-	show() {
-		this.#dialog.showModal();
-		this.#toggleBodyScroll(true);
-	}
-
-	/** Wraps `HTMLDialogElement.close()`. */
-	close() {
-		this.#toggleBodyScroll(false);
-		this.#dialog.close();
-	}
-
-	/** `show` or `close` depending on the dialog's `open` attribute. */
-	toggle() {
-		if (this.#dialog.open) this.close();
-		else this.show();
-	}
-
-	override mount() {
-		this.listener(() => this.toggle());
-
-		this.safeListener("keydown", (e) => {
-			if (e.key === "Escape" && this.#dialog.open) {
-				e.preventDefault();
-				this.close();
-			}
-		});
-
-		if (this.#clickOutsideClose) {
-			// https://blog.webdevsimplified.com/2023-04/html-dialog/#close-on-outside-click
-			this.#dialog.addEventListener("click", (e) => {
-				let rect = this.#dialog.getBoundingClientRect();
-
-				// If dialog covers full viewport, use first child element for hit testing
-				// Example: https://picocss.com/docs/modal
-				if (
-					window.innerWidth - rect.width <= this.#scrollbarWidth + 3 &&
-					window.innerHeight - rect.height <= 3 &&
-					this.#dialog.firstElementChild
-				) {
-					rect = this.#dialog.firstElementChild.getBoundingClientRect();
-				}
-
-				if (
-					e.clientX < rect.left ||
-					e.clientX > rect.right ||
-					e.clientY < rect.top ||
-					e.clientY > rect.bottom
-				) {
-					this.close();
-				}
-			});
-		}
-	}
-}