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.
- package/{base → dist/base}/copy/index.d.ts +4 -1
- package/{base → dist/base}/index.d.ts +8 -3
- package/{base → dist/base}/index.js +4 -6
- package/dist/contextmenu/index.d.ts +12 -0
- package/{contextmenu → dist/contextmenu}/index.js +6 -12
- package/{copy → dist/copy}/index.d.ts +2 -3
- package/dist/define.js +4 -0
- package/{dialog → dist/dialog}/index.d.ts +7 -8
- package/{dialog → dist/dialog}/index.js +3 -9
- package/{editor → dist/editor}/index.d.ts +2 -3
- package/{fullscreen → dist/fullscreen}/index.d.ts +3 -7
- package/{fullscreen → dist/fullscreen}/index.js +2 -3
- package/dist/index.d.ts +12 -0
- package/dist/index.js +12 -0
- package/{intersect → dist/intersect}/index.d.ts +4 -5
- package/{prefetch → dist/prefetch}/index.d.ts +7 -10
- package/{share → dist/share}/index.d.ts +2 -3
- package/{tablesort → dist/tablesort}/index.d.ts +2 -3
- package/{tablesort → dist/tablesort}/index.js +1 -1
- package/{wakelock → dist/wakelock}/index.d.ts +5 -6
- package/{youtube → dist/youtube}/index.d.ts +6 -3
- package/{youtube → dist/youtube}/index.js +0 -1
- package/package.json +103 -147
- package/LICENSE.md +0 -21
- package/README.md +0 -49
- package/animate/define.iife.js +0 -1
- package/animate/define.js +0 -2
- package/animate/index.d.ts +0 -57
- package/animate/index.iife.js +0 -1
- package/animate/index.js +0 -138
- package/base/define.iife.js +0 -1
- package/base/index.iife.js +0 -1
- package/breakpoint/define.iife.js +0 -1
- package/breakpoint/define.js +0 -2
- package/breakpoint/index.d.ts +0 -26
- package/breakpoint/index.iife.js +0 -1
- package/breakpoint/index.js +0 -55
- package/contextmenu/define.iife.js +0 -1
- package/contextmenu/index.d.ts +0 -13
- package/contextmenu/index.iife.js +0 -1
- package/copy/define.iife.js +0 -1
- package/copy/index.iife.js +0 -1
- package/define.iife.js +0 -9
- package/define.js +0 -4
- package/details/define.iife.js +0 -1
- package/details/define.js +0 -2
- package/details/index.d.ts +0 -21
- package/details/index.iife.js +0 -1
- package/details/index.js +0 -46
- package/dialog/define.iife.js +0 -1
- package/dialog/index.iife.js +0 -1
- package/editor/define.iife.js +0 -9
- package/editor/index.iife.js +0 -9
- package/fullscreen/define.iife.js +0 -1
- package/fullscreen/index.iife.js +0 -1
- package/index.d.ts +0 -17
- package/index.iife.js +0 -9
- package/index.js +0 -17
- package/intersect/define.iife.js +0 -1
- package/intersect/index.iife.js +0 -1
- package/popover/define.iife.js +0 -1
- package/popover/define.js +0 -2
- package/popover/index.d.ts +0 -25
- package/popover/index.iife.js +0 -1
- package/popover/index.js +0 -72
- package/prefetch/define.iife.js +0 -1
- package/prefetch/index.iife.js +0 -1
- package/share/define.d.ts +0 -1
- package/share/define.iife.js +0 -1
- package/share/index.iife.js +0 -1
- package/tablesort/define.d.ts +0 -1
- package/tablesort/define.iife.js +0 -1
- package/tablesort/index.iife.js +0 -1
- package/types/index.d.ts +0 -11
- package/types/index.js +0 -1
- package/wakelock/define.d.ts +0 -1
- package/wakelock/define.iife.js +0 -1
- package/wakelock/index.iife.js +0 -1
- package/youtube/define.d.ts +0 -1
- package/youtube/define.iife.js +0 -1
- package/youtube/index.iife.js +0 -1
- /package/{base → dist/base}/copy/index.js +0 -0
- /package/{animate → dist/base}/define.d.ts +0 -0
- /package/{base → dist/base}/define.js +0 -0
- /package/{base → dist/contextmenu}/define.d.ts +0 -0
- /package/{contextmenu → dist/contextmenu}/define.js +0 -0
- /package/{breakpoint → dist/copy}/define.d.ts +0 -0
- /package/{copy → dist/copy}/define.js +0 -0
- /package/{copy → dist/copy}/index.js +0 -0
- /package/{contextmenu → dist}/define.d.ts +0 -0
- /package/{copy → dist/dialog}/define.d.ts +0 -0
- /package/{dialog → dist/dialog}/define.js +0 -0
- /package/{define.d.ts → dist/editor/define.d.ts} +0 -0
- /package/{editor → dist/editor}/define.js +0 -0
- /package/{editor → dist/editor}/index.js +0 -0
- /package/{details → dist/fullscreen}/define.d.ts +0 -0
- /package/{fullscreen → dist/fullscreen}/define.js +0 -0
- /package/{dialog → dist/intersect}/define.d.ts +0 -0
- /package/{intersect → dist/intersect}/define.js +0 -0
- /package/{intersect → dist/intersect}/index.js +0 -0
- /package/{editor → dist/prefetch}/define.d.ts +0 -0
- /package/{prefetch → dist/prefetch}/define.js +0 -0
- /package/{prefetch → dist/prefetch}/index.js +0 -0
- /package/{fullscreen → dist/share}/define.d.ts +0 -0
- /package/{share → dist/share}/define.js +0 -0
- /package/{share → dist/share}/index.js +0 -0
- /package/{intersect → dist/tablesort}/define.d.ts +0 -0
- /package/{tablesort → dist/tablesort}/define.js +0 -0
- /package/{popover → dist/wakelock}/define.d.ts +0 -0
- /package/{wakelock → dist/wakelock}/define.js +0 -0
- /package/{wakelock → dist/wakelock}/index.js +0 -0
- /package/{prefetch → dist/youtube}/define.d.ts +0 -0
- /package/{youtube → dist/youtube}/define.js +0 -0
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "drab",
|
3
|
-
"description": "
|
4
|
-
"version": "
|
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
|
-
"
|
27
|
-
"base",
|
16
|
+
"dialog",
|
28
17
|
"editor",
|
29
|
-
"
|
18
|
+
"fullscreen",
|
19
|
+
"intersect",
|
20
|
+
"prefetch",
|
21
|
+
"share",
|
22
|
+
"tablesort",
|
23
|
+
"wakelock",
|
24
|
+
"youtube"
|
30
25
|
],
|
31
|
-
"repository":
|
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
|
-
"./
|
49
|
-
"types": "./
|
50
|
-
"default": "./
|
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
|
-
"./
|
57
|
-
"types": "./
|
58
|
-
"default": "./
|
49
|
+
"./base/define": {
|
50
|
+
"types": "./dist/base/define.d.ts",
|
51
|
+
"default": "./dist/base/define.js"
|
59
52
|
},
|
60
|
-
"./
|
61
|
-
"types": "./
|
62
|
-
"default": "./
|
53
|
+
"./breakpoint": {
|
54
|
+
"types": "./dist/breakpoint/index.d.ts",
|
55
|
+
"default": "./dist/breakpoint/index.js"
|
63
56
|
},
|
64
|
-
"./
|
65
|
-
"types": "./
|
66
|
-
"default": "./
|
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
|
-
"./
|
81
|
-
"types": "./
|
82
|
-
"default": "./
|
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
|
-
"./
|
97
|
-
"types": "./
|
98
|
-
"default": "./
|
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
|
-
"./
|
109
|
-
"types": "./
|
110
|
-
"default": "./
|
85
|
+
"./editor": {
|
86
|
+
"types": "./dist/editor/index.d.ts",
|
87
|
+
"default": "./dist/editor/index.js"
|
111
88
|
},
|
112
|
-
"./
|
113
|
-
"types": "./
|
114
|
-
"default": "./
|
89
|
+
"./editor/define": {
|
90
|
+
"types": "./dist/editor/define.d.ts",
|
91
|
+
"default": "./dist/editor/define.js"
|
115
92
|
},
|
116
|
-
"./
|
117
|
-
"types": "./
|
118
|
-
"default": "./
|
93
|
+
"./fullscreen": {
|
94
|
+
"types": "./dist/fullscreen/index.d.ts",
|
95
|
+
"default": "./dist/fullscreen/index.js"
|
119
96
|
},
|
120
|
-
"./
|
121
|
-
"types": "./
|
122
|
-
"default": "./
|
97
|
+
"./fullscreen/define": {
|
98
|
+
"types": "./dist/fullscreen/define.d.ts",
|
99
|
+
"default": "./dist/fullscreen/define.js"
|
123
100
|
},
|
124
|
-
"./
|
125
|
-
"types": "./
|
126
|
-
"default": "./
|
101
|
+
"./intersect": {
|
102
|
+
"types": "./dist/intersect/index.d.ts",
|
103
|
+
"default": "./dist/intersect/index.js"
|
127
104
|
},
|
128
|
-
"./
|
129
|
-
"types": "./
|
130
|
-
"default": "./
|
105
|
+
"./intersect/define": {
|
106
|
+
"types": "./dist/intersect/define.d.ts",
|
107
|
+
"default": "./dist/intersect/define.js"
|
131
108
|
},
|
132
|
-
"./
|
133
|
-
"types": "./
|
134
|
-
"default": "./
|
109
|
+
"./prefetch": {
|
110
|
+
"types": "./dist/prefetch/index.d.ts",
|
111
|
+
"default": "./dist/prefetch/index.js"
|
135
112
|
},
|
136
|
-
"./
|
137
|
-
"types": "./
|
138
|
-
"default": "./
|
113
|
+
"./prefetch/define": {
|
114
|
+
"types": "./dist/prefetch/define.d.ts",
|
115
|
+
"default": "./dist/prefetch/define.js"
|
139
116
|
},
|
140
|
-
"./
|
141
|
-
"types": "./
|
142
|
-
"default": "./
|
117
|
+
"./share": {
|
118
|
+
"types": "./dist/share/index.d.ts",
|
119
|
+
"default": "./dist/share/index.js"
|
143
120
|
},
|
144
|
-
"./
|
145
|
-
"types": "./
|
146
|
-
"default": "./
|
121
|
+
"./share/define": {
|
122
|
+
"types": "./dist/share/define.d.ts",
|
123
|
+
"default": "./dist/share/define.js"
|
147
124
|
},
|
148
|
-
"./
|
149
|
-
"types": "./
|
150
|
-
"default": "./
|
125
|
+
"./tablesort": {
|
126
|
+
"types": "./dist/tablesort/index.d.ts",
|
127
|
+
"default": "./dist/tablesort/index.js"
|
151
128
|
},
|
152
|
-
"./
|
153
|
-
"types": "./
|
154
|
-
"default": "./
|
129
|
+
"./tablesort/define": {
|
130
|
+
"types": "./dist/tablesort/define.d.ts",
|
131
|
+
"default": "./dist/tablesort/define.js"
|
155
132
|
},
|
156
|
-
"./
|
157
|
-
"types": "./
|
158
|
-
"default": "./
|
133
|
+
"./wakelock": {
|
134
|
+
"types": "./dist/wakelock/index.d.ts",
|
135
|
+
"default": "./dist/wakelock/index.js"
|
159
136
|
},
|
160
|
-
"./
|
161
|
-
"types": "./
|
162
|
-
"default": "./
|
137
|
+
"./wakelock/define": {
|
138
|
+
"types": "./dist/wakelock/define.d.ts",
|
139
|
+
"default": "./dist/wakelock/define.js"
|
163
140
|
},
|
164
|
-
"./
|
165
|
-
"types": "./
|
166
|
-
"default": "./
|
141
|
+
"./youtube": {
|
142
|
+
"types": "./dist/youtube/index.d.ts",
|
143
|
+
"default": "./dist/youtube/index.js"
|
167
144
|
},
|
168
|
-
"./
|
169
|
-
"types": "./
|
170
|
-
"default": "./
|
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
|
-
"
|
175
|
-
"
|
176
|
-
"
|
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.
|
package/animate/define.iife.js
DELETED
@@ -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
package/animate/index.d.ts
DELETED
@@ -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 {};
|
package/animate/index.iife.js
DELETED
@@ -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
|
-
}
|
package/base/define.iife.js
DELETED
@@ -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);})();
|
package/base/index.iife.js
DELETED
@@ -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);})();
|
package/breakpoint/define.js
DELETED
package/breakpoint/index.d.ts
DELETED
@@ -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 {};
|
package/breakpoint/index.iife.js
DELETED
@@ -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)}};})();
|