drab 5.4.2 → 6.1.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.
Files changed (130) hide show
  1. package/dist/announcer/define.js +3 -0
  2. package/dist/announcer/index.d.ts +49 -0
  3. package/dist/announcer/index.js +80 -0
  4. package/{base → dist/base}/copy/index.d.ts +4 -1
  5. package/{base → dist/base}/copy/index.js +1 -0
  6. package/dist/base/define.js +3 -0
  7. package/{base → dist/base}/index.d.ts +16 -11
  8. package/{base → dist/base}/index.js +19 -15
  9. package/dist/contextmenu/define.js +3 -0
  10. package/dist/contextmenu/index.d.ts +12 -0
  11. package/{contextmenu → dist/contextmenu}/index.js +6 -12
  12. package/dist/copy/define.js +3 -0
  13. package/{copy → dist/copy}/index.d.ts +2 -3
  14. package/dist/define.js +5 -0
  15. package/dist/dialog/define.js +3 -0
  16. package/{dialog → dist/dialog}/index.d.ts +7 -8
  17. package/{dialog → dist/dialog}/index.js +3 -9
  18. package/dist/editor/define.js +3 -0
  19. package/{editor → dist/editor}/index.d.ts +7 -3
  20. package/dist/fullscreen/define.js +3 -0
  21. package/{fullscreen → dist/fullscreen}/index.d.ts +3 -7
  22. package/{fullscreen → dist/fullscreen}/index.js +2 -3
  23. package/dist/index.d.ts +13 -0
  24. package/dist/index.js +13 -0
  25. package/dist/intersect/define.js +3 -0
  26. package/{intersect → dist/intersect}/index.d.ts +4 -5
  27. package/dist/prefetch/define.js +3 -0
  28. package/{prefetch → dist/prefetch}/index.d.ts +7 -10
  29. package/dist/share/define.js +3 -0
  30. package/{share → dist/share}/index.d.ts +2 -3
  31. package/dist/tablesort/define.js +3 -0
  32. package/{tablesort → dist/tablesort}/index.d.ts +6 -3
  33. package/{tablesort → dist/tablesort}/index.js +33 -21
  34. package/dist/util/define.d.ts +8 -0
  35. package/dist/util/define.js +11 -0
  36. package/dist/wakelock/define.js +3 -0
  37. package/{wakelock → dist/wakelock}/index.d.ts +5 -6
  38. package/{wakelock → dist/wakelock}/index.js +2 -0
  39. package/dist/youtube/define.js +3 -0
  40. package/{youtube → dist/youtube}/index.d.ts +6 -3
  41. package/{youtube → dist/youtube}/index.js +0 -1
  42. package/package.json +109 -145
  43. package/LICENSE.md +0 -21
  44. package/README.md +0 -49
  45. package/animate/define.iife.js +0 -1
  46. package/animate/define.js +0 -2
  47. package/animate/index.d.ts +0 -57
  48. package/animate/index.iife.js +0 -1
  49. package/animate/index.js +0 -138
  50. package/base/define.iife.js +0 -1
  51. package/base/define.js +0 -2
  52. package/base/index.iife.js +0 -1
  53. package/breakpoint/define.iife.js +0 -1
  54. package/breakpoint/define.js +0 -2
  55. package/breakpoint/index.d.ts +0 -26
  56. package/breakpoint/index.iife.js +0 -1
  57. package/breakpoint/index.js +0 -55
  58. package/contextmenu/define.iife.js +0 -1
  59. package/contextmenu/define.js +0 -2
  60. package/contextmenu/index.d.ts +0 -13
  61. package/contextmenu/index.iife.js +0 -1
  62. package/copy/define.iife.js +0 -1
  63. package/copy/define.js +0 -2
  64. package/copy/index.iife.js +0 -1
  65. package/define.iife.js +0 -9
  66. package/define.js +0 -4
  67. package/details/define.iife.js +0 -1
  68. package/details/define.js +0 -2
  69. package/details/index.d.ts +0 -21
  70. package/details/index.iife.js +0 -1
  71. package/details/index.js +0 -46
  72. package/dialog/define.iife.js +0 -1
  73. package/dialog/define.js +0 -2
  74. package/dialog/index.iife.js +0 -1
  75. package/editor/define.iife.js +0 -9
  76. package/editor/define.js +0 -2
  77. package/editor/index.iife.js +0 -9
  78. package/fullscreen/define.iife.js +0 -1
  79. package/fullscreen/define.js +0 -2
  80. package/fullscreen/index.iife.js +0 -1
  81. package/index.d.ts +0 -17
  82. package/index.iife.js +0 -9
  83. package/index.js +0 -17
  84. package/intersect/define.iife.js +0 -1
  85. package/intersect/define.js +0 -2
  86. package/intersect/index.iife.js +0 -1
  87. package/popover/define.iife.js +0 -1
  88. package/popover/define.js +0 -2
  89. package/popover/index.d.ts +0 -25
  90. package/popover/index.iife.js +0 -1
  91. package/popover/index.js +0 -72
  92. package/prefetch/define.iife.js +0 -1
  93. package/prefetch/define.js +0 -2
  94. package/prefetch/index.iife.js +0 -1
  95. package/share/define.iife.js +0 -1
  96. package/share/define.js +0 -2
  97. package/share/index.iife.js +0 -1
  98. package/tablesort/define.d.ts +0 -1
  99. package/tablesort/define.iife.js +0 -1
  100. package/tablesort/define.js +0 -2
  101. package/tablesort/index.iife.js +0 -1
  102. package/types/index.d.ts +0 -11
  103. package/types/index.js +0 -1
  104. package/wakelock/define.d.ts +0 -1
  105. package/wakelock/define.iife.js +0 -1
  106. package/wakelock/define.js +0 -2
  107. package/wakelock/index.iife.js +0 -1
  108. package/youtube/define.d.ts +0 -1
  109. package/youtube/define.iife.js +0 -1
  110. package/youtube/define.js +0 -2
  111. package/youtube/index.iife.js +0 -1
  112. /package/{animate → dist/announcer}/define.d.ts +0 -0
  113. /package/{base → dist/base}/define.d.ts +0 -0
  114. /package/{breakpoint → dist/contextmenu}/define.d.ts +0 -0
  115. /package/{contextmenu → dist/copy}/define.d.ts +0 -0
  116. /package/{copy → dist/copy}/index.js +0 -0
  117. /package/{copy → dist}/define.d.ts +0 -0
  118. /package/{define.d.ts → dist/dialog/define.d.ts} +0 -0
  119. /package/{details → dist/editor}/define.d.ts +0 -0
  120. /package/{editor → dist/editor}/index.js +0 -0
  121. /package/{dialog → dist/fullscreen}/define.d.ts +0 -0
  122. /package/{editor → dist/intersect}/define.d.ts +0 -0
  123. /package/{intersect → dist/intersect}/index.js +0 -0
  124. /package/{fullscreen → dist/prefetch}/define.d.ts +0 -0
  125. /package/{prefetch → dist/prefetch}/index.js +0 -0
  126. /package/{intersect → dist/share}/define.d.ts +0 -0
  127. /package/{share → dist/share}/index.js +0 -0
  128. /package/{popover → dist/tablesort}/define.d.ts +0 -0
  129. /package/{prefetch → dist/wakelock}/define.d.ts +0 -0
  130. /package/{share → dist/youtube}/define.d.ts +0 -0
@@ -1,6 +1,9 @@
1
- import { Base } from "../index.js";
2
- import type { Attributes } from "../types/index.js";
3
- export type TableSortAttributes = Attributes<TableSort>;
1
+ import { Base, type BaseAttributes } from "../base/index.js";
2
+ export type TableSortAttributes = BaseAttributes;
3
+ export type TableSortTriggerAttributes = {
4
+ "data-type": "string" | "boolean" | "number";
5
+ "data-value": string;
6
+ };
4
7
  /**
5
8
  * Wrap a `HTMLTableElement` in the `TableSort` element to have sortable column
6
9
  * headers. Set each `th` that you want to sort to the `trigger`. Set the `tbody`
@@ -1,4 +1,4 @@
1
- import { Base } from "../index.js";
1
+ import { Base } from "../base/index.js";
2
2
  /**
3
3
  * Wrap a `HTMLTableElement` in the `TableSort` element to have sortable column
4
4
  * headers. Set each `th` that you want to sort to the `trigger`. Set the `tbody`
@@ -20,7 +20,7 @@ export class TableSort extends Base {
20
20
  * Removes `data-asc` or `data-desc` from other triggers then sets the correct attribute on the selected trigger.
21
21
  *
22
22
  * @param trigger
23
- * @returns true if ascending, false if descending
23
+ * @returns `true` if ascending, `false` if descending
24
24
  */
25
25
  #setAttributes(trigger) {
26
26
  const asc = "data-asc";
@@ -43,11 +43,24 @@ export class TableSort extends Base {
43
43
  mount() {
44
44
  const tbody = this.getContent(HTMLTableSectionElement);
45
45
  for (const trigger of this.getTrigger()) {
46
- trigger.addEventListener(this.event, () => {
46
+ trigger.tabIndex = 0;
47
+ trigger.role = "button";
48
+ const listener = () => {
49
+ const asc = this.#setAttributes(trigger);
47
50
  Array.from(tbody.querySelectorAll("tr"))
48
- .sort(comparer(trigger, this.#setAttributes(trigger)))
51
+ .sort(comparer(trigger, asc))
49
52
  .forEach((tr) => tbody.appendChild(tr));
50
- });
53
+ this.announce(`sorted table by ${trigger.textContent} in ${asc ? "ascending" : "descending"} order`);
54
+ };
55
+ trigger.addEventListener(this.event, listener);
56
+ if (this.event === "click") {
57
+ trigger.addEventListener("keydown", (e) => {
58
+ if (e.key === "Enter" || e.key === " ") {
59
+ e.preventDefault();
60
+ listener();
61
+ }
62
+ });
63
+ }
51
64
  }
52
65
  }
53
66
  }
@@ -65,23 +78,9 @@ const comparer = (th, ascending) => {
65
78
  return collator.compare(aVal, bVal);
66
79
  }
67
80
  else if (dataType === "boolean") {
68
- /**
69
- * if value is one of these and type is boolean
70
- * it should be considered falsy
71
- * since actually `Boolean("false") === true`
72
- * @param val string pulled from the textContent or attr
73
- * @returns a boolean of the provided string
74
- */
75
- const convertToBoolean = (val) => {
76
- const falsy = ["0", "false", "null", "undefined"];
77
- if (falsy.includes(val)) {
78
- return false;
79
- }
80
- return Boolean(val);
81
- };
82
- return convertToBoolean(aVal) === convertToBoolean(bVal)
81
+ return falsyBoolean(aVal) === falsyBoolean(bVal)
83
82
  ? 0
84
- : convertToBoolean(aVal)
83
+ : falsyBoolean(aVal)
85
84
  ? -1
86
85
  : 1;
87
86
  }
@@ -107,3 +106,16 @@ const getValue = (tr, i) => {
107
106
  }
108
107
  return "";
109
108
  };
109
+ /**
110
+ * if value is one of these and type is boolean
111
+ * it should be considered falsy
112
+ * since actually `Boolean("false") === true`
113
+ * @param val string pulled from the textContent or attr
114
+ * @returns a boolean of the provided string
115
+ */
116
+ const falsyBoolean = (val) => {
117
+ if (["0", "false", "null", "undefined"].includes(val)) {
118
+ return false;
119
+ }
120
+ return Boolean(val);
121
+ };
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Define a custom element to the registry. Checks if the element is
3
+ * defined and then names the element.
4
+ *
5
+ * @param name name of the custom element
6
+ * @param Constructor custom element constructor
7
+ */
8
+ export declare const define: (name: string, Constructor: CustomElementConstructor) => void;
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Define a custom element to the registry. Checks if the element is
3
+ * defined and then names the element.
4
+ *
5
+ * @param name name of the custom element
6
+ * @param Constructor custom element constructor
7
+ */
8
+ export const define = (name, Constructor) => {
9
+ if (!customElements.get(name))
10
+ customElements.define(name, Constructor);
11
+ };
@@ -0,0 +1,3 @@
1
+ import { define } from "../util/define.js";
2
+ import { WakeLock } from "./index.js";
3
+ define("drab-wakelock", WakeLock);
@@ -1,9 +1,8 @@
1
- import { Base } from "../base/index.js";
2
- import type { Attributes } from "../types/index.js";
3
- export type WakeLockAttributes = Attributes<WakeLock> & Partial<{
4
- "auto-lock": boolean;
5
- locked: boolean;
6
- }>;
1
+ import { Base, type BaseAttributes } from "../base/index.js";
2
+ export type WakeLockAttributes = BaseAttributes & {
3
+ "auto-lock"?: boolean;
4
+ locked?: boolean;
5
+ };
7
6
  /**
8
7
  * `WakeLock` uses the [WakeLock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) to ensure the screen does not turn off when viewing the page on supported devices. Use your best judgement for when this is necessary, for example, if you have a timer that needs to stay on, or you are displaying a QR code.
9
8
  *
@@ -34,9 +34,11 @@ export class WakeLock extends Base {
34
34
  if (this.#wakeLockSupported() && document.visibilityState === "visible") {
35
35
  this.wakeLock = await navigator.wakeLock.request("screen");
36
36
  this.setAttribute("locked", "");
37
+ this.announce("screen wake lock activated");
37
38
  this.swapContent(false);
38
39
  this.wakeLock.addEventListener("release", () => {
39
40
  this.removeAttribute("locked");
41
+ this.announce("screen wake lock deactivated");
40
42
  this.swapContent(false);
41
43
  if (!this.#autoLock) {
42
44
  // set to null is required, used to determine if screen should be
@@ -0,0 +1,3 @@
1
+ import { define } from "../util/define.js";
2
+ import { YouTube } from "./index.js";
3
+ define("drab-youtube", YouTube);
@@ -1,6 +1,9 @@
1
- import { Base } from "../base/index.js";
2
- import type { Attributes } from "../types/index.js";
3
- export type YouTubeAttributes = Attributes<YouTube, "uid">;
1
+ import { Base, type BaseAttributes } from "../base/index.js";
2
+ export type YouTubeAttributes = BaseAttributes & {
3
+ autoplay?: boolean;
4
+ start?: number;
5
+ uid: string;
6
+ };
4
7
  /**
5
8
  * Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.
6
9
  */
@@ -49,7 +49,6 @@ export class YouTube extends Base {
49
49
  "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
50
50
  }
51
51
  attributeChangedCallback() {
52
- // BREAKING TODO: make consistent with other components - decide on observed attributes
53
52
  queueMicrotask(() => {
54
53
  this.iframe.src = `https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay ? "&autoplay=1" : ""}`;
55
54
  });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "drab",
3
- "description": "A headless custom element library",
4
- "version": "5.4.2",
3
+ "description": "Interactivity for You",
4
+ "version": "6.1.0",
5
5
  "homepage": "https://drab.robino.dev",
6
6
  "license": "MIT",
7
7
  "author": {
@@ -11,192 +11,156 @@
11
11
  "keywords": [
12
12
  "web components",
13
13
  "custom elements",
14
- "animate",
15
- "wakelock",
16
- "intersect",
17
14
  "contextmenu",
18
- "details",
19
- "youtube",
20
- "breakpoint",
21
- "dialog",
22
- "popover",
23
- "tablesort",
24
- "prefetch",
25
15
  "copy",
26
- "fullscreen",
27
- "base",
16
+ "dialog",
28
17
  "editor",
29
- "share"
18
+ "fullscreen",
19
+ "intersect",
20
+ "prefetch",
21
+ "share",
22
+ "tablesort",
23
+ "wakelock",
24
+ "youtube"
30
25
  ],
31
- "repository": "github:rossrobino/drab",
26
+ "repository": {
27
+ "type": "git",
28
+ "url": "git+https://github.com/rossrobino/drab.git"
29
+ },
32
30
  "type": "module",
33
- "types": "./index.d.ts",
34
- "main": "./index.js",
31
+ "types": "./dist/index.d.ts",
32
+ "main": "./dist/index.js",
35
33
  "exports": {
34
+ "./package.json": {
35
+ "default": "./package.json"
36
+ },
36
37
  ".": {
37
- "types": "./index.d.ts",
38
- "default": "./index.js"
38
+ "types": "./dist/index.d.ts",
39
+ "default": "./dist/index.js"
39
40
  },
40
41
  "./define": {
41
- "types": "./define.d.ts",
42
- "default": "./define.js"
42
+ "types": "./dist/define.d.ts",
43
+ "default": "./dist/define.js"
43
44
  },
44
- "./animate": {
45
- "types": "./animate/index.d.ts",
46
- "default": "./animate/index.js"
45
+ "./announcer": {
46
+ "types": "./dist/announcer/index.d.ts",
47
+ "default": "./dist/announcer/index.js"
47
48
  },
48
- "./animate/define": {
49
- "types": "./animate/define.d.ts",
50
- "default": "./animate/define.js"
49
+ "./announcer/define": {
50
+ "types": "./dist/announcer/define.d.ts",
51
+ "default": "./dist/announcer/define.js"
51
52
  },
52
- "./wakelock": {
53
- "types": "./wakelock/index.d.ts",
54
- "default": "./wakelock/index.js"
53
+ "./base": {
54
+ "types": "./dist/base/index.d.ts",
55
+ "default": "./dist/base/index.js"
55
56
  },
56
- "./wakelock/define": {
57
- "types": "./wakelock/define.d.ts",
58
- "default": "./wakelock/define.js"
57
+ "./base/define": {
58
+ "types": "./dist/base/define.d.ts",
59
+ "default": "./dist/base/define.js"
59
60
  },
60
- "./intersect": {
61
- "types": "./intersect/index.d.ts",
62
- "default": "./intersect/index.js"
61
+ "./breakpoint": {
62
+ "types": "./dist/breakpoint/index.d.ts",
63
+ "default": "./dist/breakpoint/index.js"
63
64
  },
64
- "./intersect/define": {
65
- "types": "./intersect/define.d.ts",
66
- "default": "./intersect/define.js"
65
+ "./breakpoint/define": {
66
+ "types": "./dist/breakpoint/define.d.ts",
67
+ "default": "./dist/breakpoint/define.js"
67
68
  },
68
69
  "./contextmenu": {
69
- "types": "./contextmenu/index.d.ts",
70
- "default": "./contextmenu/index.js"
70
+ "types": "./dist/contextmenu/index.d.ts",
71
+ "default": "./dist/contextmenu/index.js"
71
72
  },
72
73
  "./contextmenu/define": {
73
- "types": "./contextmenu/define.d.ts",
74
- "default": "./contextmenu/define.js"
75
- },
76
- "./details": {
77
- "types": "./details/index.d.ts",
78
- "default": "./details/index.js"
79
- },
80
- "./details/define": {
81
- "types": "./details/define.d.ts",
82
- "default": "./details/define.js"
74
+ "types": "./dist/contextmenu/define.d.ts",
75
+ "default": "./dist/contextmenu/define.js"
83
76
  },
84
- "./youtube": {
85
- "types": "./youtube/index.d.ts",
86
- "default": "./youtube/index.js"
87
- },
88
- "./youtube/define": {
89
- "types": "./youtube/define.d.ts",
90
- "default": "./youtube/define.js"
91
- },
92
- "./breakpoint": {
93
- "types": "./breakpoint/index.d.ts",
94
- "default": "./breakpoint/index.js"
77
+ "./copy": {
78
+ "types": "./dist/copy/index.d.ts",
79
+ "default": "./dist/copy/index.js"
95
80
  },
96
- "./breakpoint/define": {
97
- "types": "./breakpoint/define.d.ts",
98
- "default": "./breakpoint/define.js"
81
+ "./copy/define": {
82
+ "types": "./dist/copy/define.d.ts",
83
+ "default": "./dist/copy/define.js"
99
84
  },
100
85
  "./dialog": {
101
- "types": "./dialog/index.d.ts",
102
- "default": "./dialog/index.js"
86
+ "types": "./dist/dialog/index.d.ts",
87
+ "default": "./dist/dialog/index.js"
103
88
  },
104
89
  "./dialog/define": {
105
- "types": "./dialog/define.d.ts",
106
- "default": "./dialog/define.js"
90
+ "types": "./dist/dialog/define.d.ts",
91
+ "default": "./dist/dialog/define.js"
107
92
  },
108
- "./popover": {
109
- "types": "./popover/index.d.ts",
110
- "default": "./popover/index.js"
93
+ "./editor": {
94
+ "types": "./dist/editor/index.d.ts",
95
+ "default": "./dist/editor/index.js"
111
96
  },
112
- "./popover/define": {
113
- "types": "./popover/define.d.ts",
114
- "default": "./popover/define.js"
97
+ "./editor/define": {
98
+ "types": "./dist/editor/define.d.ts",
99
+ "default": "./dist/editor/define.js"
115
100
  },
116
- "./tablesort": {
117
- "types": "./tablesort/index.d.ts",
118
- "default": "./tablesort/index.js"
101
+ "./fullscreen": {
102
+ "types": "./dist/fullscreen/index.d.ts",
103
+ "default": "./dist/fullscreen/index.js"
119
104
  },
120
- "./tablesort/define": {
121
- "types": "./tablesort/define.d.ts",
122
- "default": "./tablesort/define.js"
105
+ "./fullscreen/define": {
106
+ "types": "./dist/fullscreen/define.d.ts",
107
+ "default": "./dist/fullscreen/define.js"
123
108
  },
124
- "./prefetch": {
125
- "types": "./prefetch/index.d.ts",
126
- "default": "./prefetch/index.js"
109
+ "./intersect": {
110
+ "types": "./dist/intersect/index.d.ts",
111
+ "default": "./dist/intersect/index.js"
127
112
  },
128
- "./prefetch/define": {
129
- "types": "./prefetch/define.d.ts",
130
- "default": "./prefetch/define.js"
113
+ "./intersect/define": {
114
+ "types": "./dist/intersect/define.d.ts",
115
+ "default": "./dist/intersect/define.js"
131
116
  },
132
- "./copy": {
133
- "types": "./copy/index.d.ts",
134
- "default": "./copy/index.js"
117
+ "./prefetch": {
118
+ "types": "./dist/prefetch/index.d.ts",
119
+ "default": "./dist/prefetch/index.js"
135
120
  },
136
- "./copy/define": {
137
- "types": "./copy/define.d.ts",
138
- "default": "./copy/define.js"
121
+ "./prefetch/define": {
122
+ "types": "./dist/prefetch/define.d.ts",
123
+ "default": "./dist/prefetch/define.js"
139
124
  },
140
- "./fullscreen": {
141
- "types": "./fullscreen/index.d.ts",
142
- "default": "./fullscreen/index.js"
125
+ "./share": {
126
+ "types": "./dist/share/index.d.ts",
127
+ "default": "./dist/share/index.js"
143
128
  },
144
- "./fullscreen/define": {
145
- "types": "./fullscreen/define.d.ts",
146
- "default": "./fullscreen/define.js"
129
+ "./share/define": {
130
+ "types": "./dist/share/define.d.ts",
131
+ "default": "./dist/share/define.js"
147
132
  },
148
- "./base": {
149
- "types": "./base/index.d.ts",
150
- "default": "./base/index.js"
133
+ "./tablesort": {
134
+ "types": "./dist/tablesort/index.d.ts",
135
+ "default": "./dist/tablesort/index.js"
151
136
  },
152
- "./base/define": {
153
- "types": "./base/define.d.ts",
154
- "default": "./base/define.js"
137
+ "./tablesort/define": {
138
+ "types": "./dist/tablesort/define.d.ts",
139
+ "default": "./dist/tablesort/define.js"
155
140
  },
156
- "./editor": {
157
- "types": "./editor/index.d.ts",
158
- "default": "./editor/index.js"
141
+ "./wakelock": {
142
+ "types": "./dist/wakelock/index.d.ts",
143
+ "default": "./dist/wakelock/index.js"
159
144
  },
160
- "./editor/define": {
161
- "types": "./editor/define.d.ts",
162
- "default": "./editor/define.js"
145
+ "./wakelock/define": {
146
+ "types": "./dist/wakelock/define.d.ts",
147
+ "default": "./dist/wakelock/define.js"
163
148
  },
164
- "./share": {
165
- "types": "./share/index.d.ts",
166
- "default": "./share/index.js"
149
+ "./youtube": {
150
+ "types": "./dist/youtube/index.d.ts",
151
+ "default": "./dist/youtube/index.js"
167
152
  },
168
- "./share/define": {
169
- "types": "./share/define.d.ts",
170
- "default": "./share/define.js"
153
+ "./youtube/define": {
154
+ "types": "./dist/youtube/define.d.ts",
155
+ "default": "./dist/youtube/define.js"
171
156
  }
172
157
  },
158
+ "files": [
159
+ "dist"
160
+ ],
173
161
  "scripts": {
174
- "dev": "vite --host",
175
- "build": "tsc && vite build",
176
- "preview": "vite preview",
177
- "format": "prettier --write .",
178
- "doc": "typedoc --out src/lib/docs --plugin typedoc-plugin-markdown src/package/index.ts --hideBreadcrumbs --githubPages false --publicPath /docs/ && bun src/lib/scripts/doc/index.ts && bun format",
179
- "package:json": "bun src/lib/scripts/packageJson/index.ts && prettier --write package.json",
180
- "package:copy": "cp package.json ./package && cp README.md ./package && cp LICENSE.md ./package",
181
- "package:tsc": "tsc --project tsconfig.package.json",
182
- "package": "bun package:json && tsup && bun package:tsc && bun package:copy",
183
- "pub": "bun i && bun doc && bun package && npm publish --access public ./package"
184
- },
185
- "devDependencies": {
186
- "@tailwindcss/typography": "^0.5.13",
187
- "@types/node": "^20.12.12",
188
- "@vercel/analytics": "^1.2.2",
189
- "autoprefixer": "^10.4.19",
190
- "domco": "^0.5.19",
191
- "prettier": "^3.2.5",
192
- "prettier-plugin-tailwindcss": "^0.5.14",
193
- "robino": "^0.2.0",
194
- "tailwindcss": "^3.4.3",
195
- "tsup": "^8.0.2",
196
- "typedoc": "^0.25.13",
197
- "typedoc-plugin-markdown": "^4.0.2",
198
- "typescript": "^5.4.5",
199
- "uico": "^0.2.4",
200
- "vite": "^5.2.11"
162
+ "check": "tsc --noEmit",
163
+ "dev": "tsc --watch",
164
+ "build": "tsc"
201
165
  }
202
166
  }
package/LICENSE.md DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2024 Ross Robino
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
package/README.md DELETED
@@ -1,49 +0,0 @@
1
- # A Headless Custom Element Library
2
-
3
- ## Features
4
-
5
- **drab** focuses on providing JavaScript functionality where it's most useful. Many of the elements are helpful wrappers around browser APIs. Here are some of the features of the library.
6
-
7
- ### Built on the web platform
8
-
9
- - Each element is a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). So you can use them [with a framework](http://drab.robino.dev/getting-started/#frameworks), without one, or even directly in a markdown file. These components will work [regardless of your project's architecture](https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/).
10
- - **drab** does _not_ use the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), so you can style content within these elements as usual with CSS.
11
- - Since you provide the HTML, these elements can take advantage of what JavaScript frameworks excel at---creating reusable markup that can be server side rendered.
12
- - Each element can be imported, extended, named, and used however you see fit.
13
-
14
- ### Minimal bundle size
15
-
16
- - **drab** has zero dependencies.
17
-
18
- ### Write JavaScript, or don't
19
-
20
- - Elements can be [installed](http://drab.robino.dev/getting-started/#install) as a package (recommended), or utilized without writing any JavaScript by adding a `script` tag to your document.
21
- - Each element can be configured through HTML attributes, making it possible to use an alternative language for your backend.
22
-
23
- ### Built in animations
24
-
25
- - Uses the [web animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) for transitions.
26
- - Transitions are disabled for users who prefer reduced motion.
27
- - Extend the `Animate` element to build your own elements.
28
-
29
- ## Contributing
30
-
31
- Find an bug or have an idea? Feel free to create an issue on [GitHub](https://github.com/rossrobino/drab).
32
-
33
- Since this is a headless library, simple elements like a badge that can be easily created with HTML and CSS are not included. Elements such as a select, or a date picker are also not included in favor of the native HTML elements.
34
-
35
- ### Local Development
36
-
37
- This library is built with [TypeScript](https://www.typescriptlang.org/) and [tsup](https://tsup.egoist.dev/). The docs are built with [Vite](https://vitejs.dev), [domco](https://domco.robino.dev), and [TailwindCSS](https://tailwindcss.com). The package contents are located in `src/package`.
38
-
39
- 1. Clone the [repository](https://github.com/rossrobino/drab)
40
- 2. `bun i`
41
- 3. `bun dev`
42
-
43
- ### Making changes
44
-
45
- 1. Add or edit the element in `src/package`---each element should extend `Base` or `Animate`. Each element has a `index.ts` file with the source code, and then a `define.ts` file where it is imported and called for use with a CDN.
46
- 2. Add or edit the example in `src/docs`.
47
- 3. Export the element from `src/package/index.ts`.
48
- 4. Run `bun doc` to document your element with [TypeDoc](https://typedoc.org/).
49
- 5. Add the element as an entry point to `tsup.config.ts`, then run `bun package` to build with tsup.
@@ -1 +0,0 @@
1
- "use strict";(()=>{var l=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(i){this.setAttribute("event",i)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(i=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof i)return n;throw new Error("Content not found")}swapContent(i=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let t=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...t)):(s.push(...e.childNodes),e.replaceChildren(...t)),this.getContent().replaceChildren(...s),i&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(i,n,e=document.body,t={}){t.signal=this.#e.signal,e.addEventListener(i,n,t)}triggerListener(i,n=this.event,e){for(let t of this.getTrigger())t.addEventListener(n,i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var f=class extends l{constructor(){super()}get animationOptions(){let i={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,t]=n.split("-");e&&(t==="duration"||t==="delay"?i[t]=Number(e):t==="easing"&&(i[t]=e))}return i}async animateElement(i={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=i,t=this.keyframes;if(t.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=t.at(0),o=t.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let m of a)delete s[m],delete o[m]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(t,e).finished,Object.assign(n.style,o)}}get keyframes(){let i=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(t&&o){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let r=Number(t),a=i.find(m=>m.offset===r);a?a[o]=e:i.push({[o]:e,offset:r})}}}return i.sort((n,e)=>Number(n.offset)-Number(e.offset)),i}};customElements.define("drab-animate",f);})();
package/animate/define.js DELETED
@@ -1,2 +0,0 @@
1
- import { Animate } from "./index.js";
2
- customElements.define("drab-animate", Animate);
@@ -1,57 +0,0 @@
1
- import { Base } from "../base/index.js";
2
- type AnimationKeyframe = `animation-keyframe-${"from" | "to" | number}-${string}`;
3
- type AnimationOption = `animation-option-${"easing" | "duration" | "delay"}`;
4
- export type AnimateAttributes = Partial<{
5
- [K in AnimationKeyframe | AnimationOption]: string;
6
- }>;
7
- /**
8
- * The `Animate` base class provides a declarative way to use the
9
- * [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
10
- * through HTML attributes. The `animateElement` method uses these attributes and
11
- * persists the final animation state. Other elements in **drab** extend this class
12
- * to provide animations. You can also extend this class to create your own custom
13
- * animated element.
14
- *
15
- * Keyframes can be set via HTML attributes on the element in the form of:
16
- *
17
- * ```html
18
- * <drab-animate animation-keyframe-offset-property="value">
19
- * ```
20
- *
21
- * `offset` can be `to`, `from`, or a `number`.
22
- *
23
- * `property` can be any animatable CSS property separated by dashes.
24
- *
25
- * Animations `options` can be set:
26
- *
27
- * ```html
28
- * <drab-animate animation-option-property="value">
29
- * ```
30
- *
31
- * `property` can be `duration`, `delay`, or `easing`.
32
- */
33
- export declare class Animate extends Base {
34
- constructor();
35
- /**
36
- * @returns An object containing the values of each `animation-option` attribute
37
- */
38
- get animationOptions(): KeyframeAnimationOptions;
39
- /**
40
- * @description
41
- * Animates a particular element using the web animations API.
42
- *
43
- * - Disables animation if the user prefers reduced motion.
44
- * - Sets default options
45
- * - Uses the keyframes provided from `this.keyframes`
46
- * - Waits for the animation to complete
47
- * - Sets the start and end styles based on the first and last keyframe
48
- *
49
- * @param animateOptions - animates `this.content()` by default
50
- */
51
- animateElement(animateOptions?: {
52
- element?: HTMLElement;
53
- options?: KeyframeAnimationOptions;
54
- }): Promise<void>;
55
- get keyframes(): Keyframe[];
56
- }
57
- export {};
@@ -1 +0,0 @@
1
- "use strict";(()=>{var m=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(i){this.setAttribute("event",i)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(i=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof i)return n;throw new Error("Content not found")}swapContent(i=!0,n=800){let e=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(e){let t=Array.from(this.getContent().childNodes),s=[];e instanceof HTMLTemplateElement?(s.push(e.content.cloneNode(!0)),e.content.replaceChildren(...t)):(s.push(...e.childNodes),e.replaceChildren(...t)),this.getContent().replaceChildren(...s),i&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(i,n,e=document.body,t={}){t.signal=this.#e.signal,e.addEventListener(i,n,t)}triggerListener(i,n=this.event,e){for(let t of this.getTrigger())t.addEventListener(n,i,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};var f=class extends m{constructor(){super()}get animationOptions(){let i={};for(let n of this.getAttributeNames())if(n.startsWith("animation-option-")){let e=this.getAttribute(n),[,,t]=n.split("-");e&&(t==="duration"||t==="delay"?i[t]=Number(e):t==="easing"&&(i[t]=e))}return i}async animateElement(i={element:this.getContent(),options:{}}){let{element:n=this.getContent(),options:e={}}=i,t=this.keyframes;if(t.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){e=Object.assign(this.animationOptions,e),e.duration||(e.duration=200),e.easing||(e.easing="ease-in-out");let s=t.at(0),o=t.at(-1);if(s&&o){let a=["composite","easing","offset"];for(let l of a)delete s[l],delete o[l]}e.direction?.includes("reverse")&&([s,o]=[o,s]),Object.assign(n.style,s),await n.animate(t,e).finished,Object.assign(n.style,o)}}get keyframes(){let i=[];for(let n of this.getAttributeNames()){let e=this.getAttribute(n),[,,t,...s]=n.split("-");if(n.startsWith("animation-keyframe-")){let o=s.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(t&&o){t==="from"?t="0":t==="to"?t="1":t=String(parseInt(t)*.01);let r=Number(t),a=i.find(l=>l.offset===r);a?a[o]=e:i.push({[o]:e,offset:r})}}}return i.sort((n,e)=>Number(n.offset)-Number(e.offset)),i}};})();