drab 6.4.1 → 6.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dialog/index.d.ts +5 -1
- package/dist/dialog/index.js +13 -2
- package/package.json +1 -1
package/dist/dialog/index.d.ts
CHANGED
|
@@ -6,12 +6,16 @@ export type DialogAttributes = BaseAttributes & {
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides triggers for the `HTMLDialogElement`.
|
|
8
8
|
*
|
|
9
|
+
* ### Attributes
|
|
10
|
+
*
|
|
9
11
|
* `click-outside-close`
|
|
10
12
|
*
|
|
11
13
|
* By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
|
|
12
14
|
* Add a `click-outside-close` attribute to close when the user clicks outside.
|
|
13
15
|
*
|
|
14
|
-
*
|
|
16
|
+
* If the dialog covers the full viewport and this attribute is present, the first child
|
|
17
|
+
* of the dialog will be assumed to be the content of the dialog and the dialog will close
|
|
18
|
+
* if there is a click outside of the first child element.
|
|
15
19
|
*
|
|
16
20
|
* `remove-body-scroll`
|
|
17
21
|
*
|
package/dist/dialog/index.js
CHANGED
|
@@ -2,12 +2,16 @@ import { Base } from "../base/index.js";
|
|
|
2
2
|
/**
|
|
3
3
|
* Provides triggers for the `HTMLDialogElement`.
|
|
4
4
|
*
|
|
5
|
+
* ### Attributes
|
|
6
|
+
*
|
|
5
7
|
* `click-outside-close`
|
|
6
8
|
*
|
|
7
9
|
* By default, the `HTMLDialogElement` doesn't close if the user clicks outside of it.
|
|
8
10
|
* Add a `click-outside-close` attribute to close when the user clicks outside.
|
|
9
11
|
*
|
|
10
|
-
*
|
|
12
|
+
* If the dialog covers the full viewport and this attribute is present, the first child
|
|
13
|
+
* of the dialog will be assumed to be the content of the dialog and the dialog will close
|
|
14
|
+
* if there is a click outside of the first child element.
|
|
11
15
|
*
|
|
12
16
|
* `remove-body-scroll`
|
|
13
17
|
*
|
|
@@ -63,7 +67,14 @@ export class Dialog extends Base {
|
|
|
63
67
|
if (this.hasAttribute("click-outside-close")) {
|
|
64
68
|
// https://blog.webdevsimplified.com/2023-04/html-dialog/#close-on-outside-click
|
|
65
69
|
this.dialog.addEventListener("click", (e) => {
|
|
66
|
-
|
|
70
|
+
let rect = this.dialog.getBoundingClientRect();
|
|
71
|
+
// If dialog covers full viewport (with a small tolerance), use first child element for hit testing
|
|
72
|
+
// Example: https://picocss.com/docs/modal
|
|
73
|
+
if (rect.width - window.innerWidth <= 5 && // 5px tolerance for rounding issues
|
|
74
|
+
rect.height - window.innerHeight <= 5 &&
|
|
75
|
+
this.dialog.firstElementChild) {
|
|
76
|
+
rect = this.dialog.firstElementChild.getBoundingClientRect();
|
|
77
|
+
}
|
|
67
78
|
if (e.clientX < rect.left ||
|
|
68
79
|
e.clientX > rect.right ||
|
|
69
80
|
e.clientY < rect.top ||
|