drab 6.4.0 → 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/copy/index.js +1 -1
- package/dist/dialog/index.d.ts +7 -3
- package/dist/dialog/index.js +15 -6
- package/package.json +1 -1
package/dist/copy/index.js
CHANGED
|
@@ -29,7 +29,7 @@ export class Copy extends Base {
|
|
|
29
29
|
* @param value The `value` to copy
|
|
30
30
|
*/
|
|
31
31
|
copy(value = this.value) {
|
|
32
|
-
this.announce(
|
|
32
|
+
this.announce("copied text to clipboard");
|
|
33
33
|
this.swapContent();
|
|
34
34
|
return navigator.clipboard.writeText(value);
|
|
35
35
|
}
|
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
|
*
|
|
@@ -23,9 +27,9 @@ export declare class Dialog extends Base {
|
|
|
23
27
|
constructor();
|
|
24
28
|
/** The `HTMLDialogElement` within the element. */
|
|
25
29
|
get dialog(): HTMLDialogElement;
|
|
26
|
-
/** `HTMLDialogElement.showModal()
|
|
30
|
+
/** Wraps `HTMLDialogElement.showModal()`. */
|
|
27
31
|
show(): void;
|
|
28
|
-
/** `HTMLDialogElement.close()
|
|
32
|
+
/** Wraps `HTMLDialogElement.close()`. */
|
|
29
33
|
close(): void;
|
|
30
34
|
/** `show` or `close` depending on the dialog's `open` attribute. */
|
|
31
35
|
toggle(): void;
|
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
|
*
|
|
@@ -15,7 +19,6 @@ import { Base } from "../base/index.js";
|
|
|
15
19
|
* is open.
|
|
16
20
|
*/
|
|
17
21
|
export class Dialog extends Base {
|
|
18
|
-
/** The initial margin-right value of the body element. */
|
|
19
22
|
#initialBodyMarginRight = parseInt(getComputedStyle(document.body).marginRight);
|
|
20
23
|
constructor() {
|
|
21
24
|
super();
|
|
@@ -36,12 +39,12 @@ export class Dialog extends Base {
|
|
|
36
39
|
document.body.style.overflow = show ? "hidden" : "";
|
|
37
40
|
}
|
|
38
41
|
}
|
|
39
|
-
/** `HTMLDialogElement.showModal()
|
|
42
|
+
/** Wraps `HTMLDialogElement.showModal()`. */
|
|
40
43
|
show() {
|
|
41
44
|
this.dialog.showModal();
|
|
42
45
|
this.#toggleBodyScroll(true);
|
|
43
46
|
}
|
|
44
|
-
/** `HTMLDialogElement.close()
|
|
47
|
+
/** Wraps `HTMLDialogElement.close()`. */
|
|
45
48
|
close() {
|
|
46
49
|
this.#toggleBodyScroll(false);
|
|
47
50
|
this.dialog.close();
|
|
@@ -57,7 +60,6 @@ export class Dialog extends Base {
|
|
|
57
60
|
this.triggerListener(() => this.toggle());
|
|
58
61
|
this.safeListener("keydown", (e) => {
|
|
59
62
|
if (e.key === "Escape" && this.dialog.open) {
|
|
60
|
-
// to execute animation
|
|
61
63
|
e.preventDefault();
|
|
62
64
|
this.close();
|
|
63
65
|
}
|
|
@@ -65,7 +67,14 @@ export class Dialog extends Base {
|
|
|
65
67
|
if (this.hasAttribute("click-outside-close")) {
|
|
66
68
|
// https://blog.webdevsimplified.com/2023-04/html-dialog/#close-on-outside-click
|
|
67
69
|
this.dialog.addEventListener("click", (e) => {
|
|
68
|
-
|
|
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
|
+
}
|
|
69
78
|
if (e.clientX < rect.left ||
|
|
70
79
|
e.clientX > rect.right ||
|
|
71
80
|
e.clientY < rect.top ||
|