drab 5.4.2 → 6.0.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 (113) hide show
  1. package/{base → dist/base}/copy/index.d.ts +4 -1
  2. package/{base → dist/base}/index.d.ts +8 -3
  3. package/{base → dist/base}/index.js +4 -6
  4. package/dist/contextmenu/index.d.ts +12 -0
  5. package/{contextmenu → dist/contextmenu}/index.js +6 -12
  6. package/{copy → dist/copy}/index.d.ts +2 -3
  7. package/dist/define.js +4 -0
  8. package/{dialog → dist/dialog}/index.d.ts +7 -8
  9. package/{dialog → dist/dialog}/index.js +3 -9
  10. package/{editor → dist/editor}/index.d.ts +2 -3
  11. package/{fullscreen → dist/fullscreen}/index.d.ts +3 -7
  12. package/{fullscreen → dist/fullscreen}/index.js +2 -3
  13. package/dist/index.d.ts +12 -0
  14. package/dist/index.js +12 -0
  15. package/{intersect → dist/intersect}/index.d.ts +4 -5
  16. package/{prefetch → dist/prefetch}/index.d.ts +7 -10
  17. package/{share → dist/share}/index.d.ts +2 -3
  18. package/{tablesort → dist/tablesort}/index.d.ts +2 -3
  19. package/{tablesort → dist/tablesort}/index.js +1 -1
  20. package/{wakelock → dist/wakelock}/index.d.ts +5 -6
  21. package/{youtube → dist/youtube}/index.d.ts +6 -3
  22. package/{youtube → dist/youtube}/index.js +0 -1
  23. package/package.json +103 -147
  24. package/LICENSE.md +0 -21
  25. package/README.md +0 -49
  26. package/animate/define.iife.js +0 -1
  27. package/animate/define.js +0 -2
  28. package/animate/index.d.ts +0 -57
  29. package/animate/index.iife.js +0 -1
  30. package/animate/index.js +0 -138
  31. package/base/define.iife.js +0 -1
  32. package/base/index.iife.js +0 -1
  33. package/breakpoint/define.iife.js +0 -1
  34. package/breakpoint/define.js +0 -2
  35. package/breakpoint/index.d.ts +0 -26
  36. package/breakpoint/index.iife.js +0 -1
  37. package/breakpoint/index.js +0 -55
  38. package/contextmenu/define.iife.js +0 -1
  39. package/contextmenu/index.d.ts +0 -13
  40. package/contextmenu/index.iife.js +0 -1
  41. package/copy/define.iife.js +0 -1
  42. package/copy/index.iife.js +0 -1
  43. package/define.iife.js +0 -9
  44. package/define.js +0 -4
  45. package/details/define.iife.js +0 -1
  46. package/details/define.js +0 -2
  47. package/details/index.d.ts +0 -21
  48. package/details/index.iife.js +0 -1
  49. package/details/index.js +0 -46
  50. package/dialog/define.iife.js +0 -1
  51. package/dialog/index.iife.js +0 -1
  52. package/editor/define.iife.js +0 -9
  53. package/editor/index.iife.js +0 -9
  54. package/fullscreen/define.iife.js +0 -1
  55. package/fullscreen/index.iife.js +0 -1
  56. package/index.d.ts +0 -17
  57. package/index.iife.js +0 -9
  58. package/index.js +0 -17
  59. package/intersect/define.iife.js +0 -1
  60. package/intersect/index.iife.js +0 -1
  61. package/popover/define.iife.js +0 -1
  62. package/popover/define.js +0 -2
  63. package/popover/index.d.ts +0 -25
  64. package/popover/index.iife.js +0 -1
  65. package/popover/index.js +0 -72
  66. package/prefetch/define.iife.js +0 -1
  67. package/prefetch/index.iife.js +0 -1
  68. package/share/define.d.ts +0 -1
  69. package/share/define.iife.js +0 -1
  70. package/share/index.iife.js +0 -1
  71. package/tablesort/define.d.ts +0 -1
  72. package/tablesort/define.iife.js +0 -1
  73. package/tablesort/index.iife.js +0 -1
  74. package/types/index.d.ts +0 -11
  75. package/types/index.js +0 -1
  76. package/wakelock/define.d.ts +0 -1
  77. package/wakelock/define.iife.js +0 -1
  78. package/wakelock/index.iife.js +0 -1
  79. package/youtube/define.d.ts +0 -1
  80. package/youtube/define.iife.js +0 -1
  81. package/youtube/index.iife.js +0 -1
  82. /package/{base → dist/base}/copy/index.js +0 -0
  83. /package/{animate → dist/base}/define.d.ts +0 -0
  84. /package/{base → dist/base}/define.js +0 -0
  85. /package/{base → dist/contextmenu}/define.d.ts +0 -0
  86. /package/{contextmenu → dist/contextmenu}/define.js +0 -0
  87. /package/{breakpoint → dist/copy}/define.d.ts +0 -0
  88. /package/{copy → dist/copy}/define.js +0 -0
  89. /package/{copy → dist/copy}/index.js +0 -0
  90. /package/{contextmenu → dist}/define.d.ts +0 -0
  91. /package/{copy → dist/dialog}/define.d.ts +0 -0
  92. /package/{dialog → dist/dialog}/define.js +0 -0
  93. /package/{define.d.ts → dist/editor/define.d.ts} +0 -0
  94. /package/{editor → dist/editor}/define.js +0 -0
  95. /package/{editor → dist/editor}/index.js +0 -0
  96. /package/{details → dist/fullscreen}/define.d.ts +0 -0
  97. /package/{fullscreen → dist/fullscreen}/define.js +0 -0
  98. /package/{dialog → dist/intersect}/define.d.ts +0 -0
  99. /package/{intersect → dist/intersect}/define.js +0 -0
  100. /package/{intersect → dist/intersect}/index.js +0 -0
  101. /package/{editor → dist/prefetch}/define.d.ts +0 -0
  102. /package/{prefetch → dist/prefetch}/define.js +0 -0
  103. /package/{prefetch → dist/prefetch}/index.js +0 -0
  104. /package/{fullscreen → dist/share}/define.d.ts +0 -0
  105. /package/{share → dist/share}/define.js +0 -0
  106. /package/{share → dist/share}/index.js +0 -0
  107. /package/{intersect → dist/tablesort}/define.d.ts +0 -0
  108. /package/{tablesort → dist/tablesort}/define.js +0 -0
  109. /package/{popover → dist/wakelock}/define.d.ts +0 -0
  110. /package/{wakelock → dist/wakelock}/define.js +0 -0
  111. /package/{wakelock → dist/wakelock}/index.js +0 -0
  112. /package/{prefetch → dist/youtube}/define.d.ts +0 -0
  113. /package/{youtube → dist/youtube}/define.js +0 -0
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.0.0",
5
5
  "homepage": "https://drab.robino.dev",
6
6
  "license": "MIT",
7
7
  "author": {
@@ -11,192 +11,148 @@
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"
43
- },
44
- "./animate": {
45
- "types": "./animate/index.d.ts",
46
- "default": "./animate/index.js"
42
+ "types": "./dist/define.d.ts",
43
+ "default": "./dist/define.js"
47
44
  },
48
- "./animate/define": {
49
- "types": "./animate/define.d.ts",
50
- "default": "./animate/define.js"
51
- },
52
- "./wakelock": {
53
- "types": "./wakelock/index.d.ts",
54
- "default": "./wakelock/index.js"
45
+ "./base": {
46
+ "types": "./dist/base/index.d.ts",
47
+ "default": "./dist/base/index.js"
55
48
  },
56
- "./wakelock/define": {
57
- "types": "./wakelock/define.d.ts",
58
- "default": "./wakelock/define.js"
49
+ "./base/define": {
50
+ "types": "./dist/base/define.d.ts",
51
+ "default": "./dist/base/define.js"
59
52
  },
60
- "./intersect": {
61
- "types": "./intersect/index.d.ts",
62
- "default": "./intersect/index.js"
53
+ "./breakpoint": {
54
+ "types": "./dist/breakpoint/index.d.ts",
55
+ "default": "./dist/breakpoint/index.js"
63
56
  },
64
- "./intersect/define": {
65
- "types": "./intersect/define.d.ts",
66
- "default": "./intersect/define.js"
57
+ "./breakpoint/define": {
58
+ "types": "./dist/breakpoint/define.d.ts",
59
+ "default": "./dist/breakpoint/define.js"
67
60
  },
68
61
  "./contextmenu": {
69
- "types": "./contextmenu/index.d.ts",
70
- "default": "./contextmenu/index.js"
62
+ "types": "./dist/contextmenu/index.d.ts",
63
+ "default": "./dist/contextmenu/index.js"
71
64
  },
72
65
  "./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"
66
+ "types": "./dist/contextmenu/define.d.ts",
67
+ "default": "./dist/contextmenu/define.js"
79
68
  },
80
- "./details/define": {
81
- "types": "./details/define.d.ts",
82
- "default": "./details/define.js"
83
- },
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"
69
+ "./copy": {
70
+ "types": "./dist/copy/index.d.ts",
71
+ "default": "./dist/copy/index.js"
95
72
  },
96
- "./breakpoint/define": {
97
- "types": "./breakpoint/define.d.ts",
98
- "default": "./breakpoint/define.js"
73
+ "./copy/define": {
74
+ "types": "./dist/copy/define.d.ts",
75
+ "default": "./dist/copy/define.js"
99
76
  },
100
77
  "./dialog": {
101
- "types": "./dialog/index.d.ts",
102
- "default": "./dialog/index.js"
78
+ "types": "./dist/dialog/index.d.ts",
79
+ "default": "./dist/dialog/index.js"
103
80
  },
104
81
  "./dialog/define": {
105
- "types": "./dialog/define.d.ts",
106
- "default": "./dialog/define.js"
82
+ "types": "./dist/dialog/define.d.ts",
83
+ "default": "./dist/dialog/define.js"
107
84
  },
108
- "./popover": {
109
- "types": "./popover/index.d.ts",
110
- "default": "./popover/index.js"
85
+ "./editor": {
86
+ "types": "./dist/editor/index.d.ts",
87
+ "default": "./dist/editor/index.js"
111
88
  },
112
- "./popover/define": {
113
- "types": "./popover/define.d.ts",
114
- "default": "./popover/define.js"
89
+ "./editor/define": {
90
+ "types": "./dist/editor/define.d.ts",
91
+ "default": "./dist/editor/define.js"
115
92
  },
116
- "./tablesort": {
117
- "types": "./tablesort/index.d.ts",
118
- "default": "./tablesort/index.js"
93
+ "./fullscreen": {
94
+ "types": "./dist/fullscreen/index.d.ts",
95
+ "default": "./dist/fullscreen/index.js"
119
96
  },
120
- "./tablesort/define": {
121
- "types": "./tablesort/define.d.ts",
122
- "default": "./tablesort/define.js"
97
+ "./fullscreen/define": {
98
+ "types": "./dist/fullscreen/define.d.ts",
99
+ "default": "./dist/fullscreen/define.js"
123
100
  },
124
- "./prefetch": {
125
- "types": "./prefetch/index.d.ts",
126
- "default": "./prefetch/index.js"
101
+ "./intersect": {
102
+ "types": "./dist/intersect/index.d.ts",
103
+ "default": "./dist/intersect/index.js"
127
104
  },
128
- "./prefetch/define": {
129
- "types": "./prefetch/define.d.ts",
130
- "default": "./prefetch/define.js"
105
+ "./intersect/define": {
106
+ "types": "./dist/intersect/define.d.ts",
107
+ "default": "./dist/intersect/define.js"
131
108
  },
132
- "./copy": {
133
- "types": "./copy/index.d.ts",
134
- "default": "./copy/index.js"
109
+ "./prefetch": {
110
+ "types": "./dist/prefetch/index.d.ts",
111
+ "default": "./dist/prefetch/index.js"
135
112
  },
136
- "./copy/define": {
137
- "types": "./copy/define.d.ts",
138
- "default": "./copy/define.js"
113
+ "./prefetch/define": {
114
+ "types": "./dist/prefetch/define.d.ts",
115
+ "default": "./dist/prefetch/define.js"
139
116
  },
140
- "./fullscreen": {
141
- "types": "./fullscreen/index.d.ts",
142
- "default": "./fullscreen/index.js"
117
+ "./share": {
118
+ "types": "./dist/share/index.d.ts",
119
+ "default": "./dist/share/index.js"
143
120
  },
144
- "./fullscreen/define": {
145
- "types": "./fullscreen/define.d.ts",
146
- "default": "./fullscreen/define.js"
121
+ "./share/define": {
122
+ "types": "./dist/share/define.d.ts",
123
+ "default": "./dist/share/define.js"
147
124
  },
148
- "./base": {
149
- "types": "./base/index.d.ts",
150
- "default": "./base/index.js"
125
+ "./tablesort": {
126
+ "types": "./dist/tablesort/index.d.ts",
127
+ "default": "./dist/tablesort/index.js"
151
128
  },
152
- "./base/define": {
153
- "types": "./base/define.d.ts",
154
- "default": "./base/define.js"
129
+ "./tablesort/define": {
130
+ "types": "./dist/tablesort/define.d.ts",
131
+ "default": "./dist/tablesort/define.js"
155
132
  },
156
- "./editor": {
157
- "types": "./editor/index.d.ts",
158
- "default": "./editor/index.js"
133
+ "./wakelock": {
134
+ "types": "./dist/wakelock/index.d.ts",
135
+ "default": "./dist/wakelock/index.js"
159
136
  },
160
- "./editor/define": {
161
- "types": "./editor/define.d.ts",
162
- "default": "./editor/define.js"
137
+ "./wakelock/define": {
138
+ "types": "./dist/wakelock/define.d.ts",
139
+ "default": "./dist/wakelock/define.js"
163
140
  },
164
- "./share": {
165
- "types": "./share/index.d.ts",
166
- "default": "./share/index.js"
141
+ "./youtube": {
142
+ "types": "./dist/youtube/index.d.ts",
143
+ "default": "./dist/youtube/index.js"
167
144
  },
168
- "./share/define": {
169
- "types": "./share/define.d.ts",
170
- "default": "./share/define.js"
145
+ "./youtube/define": {
146
+ "types": "./dist/youtube/define.d.ts",
147
+ "default": "./dist/youtube/define.js"
171
148
  }
172
149
  },
150
+ "files": [
151
+ "dist"
152
+ ],
173
153
  "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"
154
+ "check": "tsc --noEmit",
155
+ "dev": "tsc --watch",
156
+ "build": "tsc"
201
157
  }
202
158
  }
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}};})();
package/animate/index.js DELETED
@@ -1,138 +0,0 @@
1
- import { Base } from "../base/index.js";
2
- /**
3
- * The `Animate` base class provides a declarative way to use the
4
- * [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
5
- * through HTML attributes. The `animateElement` method uses these attributes and
6
- * persists the final animation state. Other elements in **drab** extend this class
7
- * to provide animations. You can also extend this class to create your own custom
8
- * animated element.
9
- *
10
- * Keyframes can be set via HTML attributes on the element in the form of:
11
- *
12
- * ```html
13
- * <drab-animate animation-keyframe-offset-property="value">
14
- * ```
15
- *
16
- * `offset` can be `to`, `from`, or a `number`.
17
- *
18
- * `property` can be any animatable CSS property separated by dashes.
19
- *
20
- * Animations `options` can be set:
21
- *
22
- * ```html
23
- * <drab-animate animation-option-property="value">
24
- * ```
25
- *
26
- * `property` can be `duration`, `delay`, or `easing`.
27
- */
28
- export class Animate extends Base {
29
- constructor() {
30
- super();
31
- }
32
- /**
33
- * @returns An object containing the values of each `animation-option` attribute
34
- */
35
- get animationOptions() {
36
- const options = {};
37
- for (const attributeName of this.getAttributeNames()) {
38
- if (attributeName.startsWith("animation-option-")) {
39
- const value = this.getAttribute(attributeName);
40
- let [, , option] = attributeName.split("-");
41
- if (value) {
42
- if (option === "duration" || option === "delay") {
43
- options[option] = Number(value);
44
- }
45
- else if (option === "easing") {
46
- options[option] = value;
47
- }
48
- }
49
- }
50
- }
51
- return options;
52
- }
53
- /**
54
- * @description
55
- * Animates a particular element using the web animations API.
56
- *
57
- * - Disables animation if the user prefers reduced motion.
58
- * - Sets default options
59
- * - Uses the keyframes provided from `this.keyframes`
60
- * - Waits for the animation to complete
61
- * - Sets the start and end styles based on the first and last keyframe
62
- *
63
- * @param animateOptions - animates `this.content()` by default
64
- */
65
- async animateElement(animateOptions = { element: this.getContent(), options: {} }) {
66
- let { element = this.getContent(), options = {} } = animateOptions;
67
- const keyframes = this.keyframes;
68
- if (keyframes.length &&
69
- !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
70
- // options passed in via JS override the html attributes
71
- options = Object.assign(this.animationOptions, options);
72
- // defaults
73
- if (!options.duration)
74
- options.duration = 200;
75
- if (!options.easing)
76
- options.easing = "ease-in-out";
77
- let startStyles = keyframes.at(0);
78
- let endStyles = keyframes.at(-1);
79
- if (startStyles && endStyles) {
80
- // Don't modify the start/end style based on these,
81
- // everything else is a CSS property.
82
- // This is instead of doing `fill` since it is discouraged:
83
- // https://www.w3.org/TR/web-animations-1/#fill-behavior
84
- const notStyles = ["composite", "easing", "offset"];
85
- for (const key of notStyles) {
86
- delete startStyles[key];
87
- delete endStyles[key];
88
- }
89
- }
90
- if (options.direction?.includes("reverse")) {
91
- // swap the start and ending values
92
- [startStyles, endStyles] = [endStyles, startStyles];
93
- }
94
- Object.assign(element.style, startStyles);
95
- const animation = element.animate(keyframes, options);
96
- await animation.finished;
97
- Object.assign(element.style, endStyles);
98
- }
99
- }
100
- get keyframes() {
101
- const keyframes = [];
102
- for (const attributeName of this.getAttributeNames()) {
103
- /** the css property value, ex: "translate(100%,0)" */
104
- const value = this.getAttribute(attributeName);
105
- let [, , offset, ...propertyArray] = attributeName.split("-");
106
- if (attributeName.startsWith("animation-keyframe-")) {
107
- const property = propertyArray
108
- .map((v, i) => {
109
- if (i < 1)
110
- return v;
111
- return v.at(0)?.toUpperCase() + v.slice(1);
112
- })
113
- .join("");
114
- if (offset && property) {
115
- if (offset === "from")
116
- offset = "0";
117
- else if (offset === "to")
118
- offset = "1";
119
- else
120
- offset = String(parseInt(offset) * 0.01);
121
- const numberOffset = Number(offset);
122
- const sameOffsetKeyframe = keyframes.find((v) => v.offset === numberOffset);
123
- if (sameOffsetKeyframe) {
124
- sameOffsetKeyframe[property] = value;
125
- }
126
- else {
127
- keyframes.push({
128
- [property]: value,
129
- offset: numberOffset,
130
- });
131
- }
132
- }
133
- }
134
- }
135
- keyframes.sort((a, b) => Number(a.offset) - Number(b.offset));
136
- return keyframes;
137
- }
138
- }
@@ -1 +0,0 @@
1
- "use strict";(()=>{var r=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof e)return n;throw new Error("Content not found")}swapContent(e=!0,n=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let s=Array.from(this.getContent().childNodes),o=[];t instanceof HTMLTemplateElement?(o.push(t.content.cloneNode(!0)),t.content.replaceChildren(...s)):(o.push(...t.childNodes),t.replaceChildren(...s)),this.getContent().replaceChildren(...o),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,s={}){s.signal=this.#e.signal,t.addEventListener(e,n,s)}triggerListener(e,n=this.event,t){for(let s of this.getTrigger())s.addEventListener(n,e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};customElements.define("drab-base",r);})();
@@ -1 +0,0 @@
1
- "use strict";(()=>{var o=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let n=this.querySelector(this.getAttribute("content")??"[data-content]");if(n instanceof e)return n;throw new Error("Content not found")}swapContent(e=!0,n=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let r=Array.from(this.getContent().childNodes),s=[];t instanceof HTMLTemplateElement?(s.push(t.content.cloneNode(!0)),t.content.replaceChildren(...r)):(s.push(...t.childNodes),t.replaceChildren(...r)),this.getContent().replaceChildren(...s),e&&setTimeout(()=>this.swapContent(!1),n)}}safeListener(e,n,t=document.body,r={}){r.signal=this.#e.signal,t.addEventListener(e,n,r)}triggerListener(e,n=this.event,t){for(let r of this.getTrigger())r.addEventListener(n,e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#e.abort()}};})();
@@ -1 +0,0 @@
1
- "use strict";(()=>{var i=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes),o=[];n instanceof HTMLTemplateElement?(o.push(n.content.cloneNode(!0)),n.content.replaceChildren(...r)):(o.push(...n.childNodes),n.replaceChildren(...r)),this.getContent().replaceChildren(...o),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,n=document.body,r={}){r.signal=this.#t.signal,n.addEventListener(t,e,r)}triggerListener(t,e=this.event,n){for(let r of this.getTrigger())r.addEventListener(e,t,n)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var s=class extends i{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...n]=e.split("-");n&&t.push({name:n.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,n)=>n.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};customElements.define("drab-breakpoint",s);})();
@@ -1,2 +0,0 @@
1
- import { Breakpoint } from "./index.js";
2
- customElements.define("drab-breakpoint", Breakpoint);
@@ -1,26 +0,0 @@
1
- import { Base } from "../base/index.js";
2
- import type { Attributes } from "../types/index.js";
3
- export type BreakpointAttributes = Attributes<Breakpoint> & Partial<{
4
- [attr: `breakpoint-${string}`]: string;
5
- }>;
6
- type Breakpoints = {
7
- name: string;
8
- width: number;
9
- }[];
10
- /**
11
- * Displays the current breakpoint and `window.innerWidth`, based on the `breakpoints` provided. Defaults to [TailwindCSS breakpoint sizes](https://tailwindcss.com/docs/responsive-design).
12
- *
13
- * Provide alternate breakpoints by specifying `breakpoint` attributes:
14
- *
15
- * ```html
16
- * <drab-breakpoint breakpoint-name="400">
17
- * ```
18
- */
19
- export declare class Breakpoint extends Base {
20
- breakpoints: Breakpoints;
21
- constructor();
22
- /** finds the current breakpoint */
23
- get breakpoint(): string;
24
- mount(): void;
25
- }
26
- export {};
@@ -1 +0,0 @@
1
- "use strict";(()=>{var i=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes),s=[];n instanceof HTMLTemplateElement?(s.push(n.content.cloneNode(!0)),n.content.replaceChildren(...r)):(s.push(...n.childNodes),n.replaceChildren(...r)),this.getContent().replaceChildren(...s),t&&setTimeout(()=>this.swapContent(!1),e)}}safeListener(t,e,n=document.body,r={}){r.signal=this.#t.signal,n.addEventListener(t,e,r)}triggerListener(t,e=this.event,n){for(let r of this.getTrigger())r.addEventListener(e,t,n)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}destroy(){}disconnectedCallback(){this.destroy(),this.#t.abort()}};var o=class extends i{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...n]=e.split("-");n&&t.push({name:n.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,n)=>n.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};})();