@trenoxxious/n-components 1.0.11 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/favicon.ico +0 -0
- package/dist/index.css +254 -35
- package/dist/index.html +151 -98
- package/dist/n-components.es.js +102 -7
- package/dist/n-components.umd.js +33 -7
- package/package.json +2 -1
- package/README.md +0 -24
- package/dist/vite.svg +0 -1
package/dist/favicon.ico
ADDED
|
Binary file
|
package/dist/index.css
CHANGED
|
@@ -15,6 +15,12 @@
|
|
|
15
15
|
-moz-osx-font-smoothing: grayscale;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
@property --degrees {
|
|
19
|
+
syntax: '<angle>';
|
|
20
|
+
inherits: false;
|
|
21
|
+
initial-value: 2deg;
|
|
22
|
+
}
|
|
23
|
+
|
|
18
24
|
* {
|
|
19
25
|
margin: 0;
|
|
20
26
|
padding: 0;
|
|
@@ -22,10 +28,22 @@
|
|
|
22
28
|
text-wrap: pretty;
|
|
23
29
|
}
|
|
24
30
|
|
|
31
|
+
a.link {
|
|
32
|
+
color: rgba(255, 158, 79, 1);
|
|
33
|
+
border-bottom: 1px dashed rgba(255, 158, 79, 1);
|
|
34
|
+
text-decoration: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
a.link:visited {
|
|
38
|
+
color: rgba(216, 143, 238, 1);
|
|
39
|
+
border-color: rgba(216, 143, 238, 1);
|
|
40
|
+
}
|
|
41
|
+
|
|
25
42
|
body {
|
|
26
43
|
margin: 0;
|
|
27
44
|
min-width: 320px;
|
|
28
45
|
min-height: 100vh;
|
|
46
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='67' height='67' fill-opacity='0.21' fill='%23022236'/%3E%3C/svg%3E");
|
|
29
47
|
}
|
|
30
48
|
|
|
31
49
|
header {
|
|
@@ -41,9 +59,10 @@ header {
|
|
|
41
59
|
}
|
|
42
60
|
|
|
43
61
|
header h1 {
|
|
62
|
+
user-select: none;
|
|
44
63
|
position: relative;
|
|
45
64
|
background-clip: text;
|
|
46
|
-
background-image: linear-gradient(
|
|
65
|
+
background-image: linear-gradient(var(--degrees), rgba(255, 65, 65, 1)39%, rgba(255, 109, 109, 1) 40%, transparent 40.5%);
|
|
47
66
|
-webkit-background-clip: text;
|
|
48
67
|
color: transparent;
|
|
49
68
|
font-size: 9rem;
|
|
@@ -53,6 +72,12 @@ header h1 {
|
|
|
53
72
|
text-wrap: nowrap;
|
|
54
73
|
}
|
|
55
74
|
|
|
75
|
+
header h2 {
|
|
76
|
+
font-family: "Manjari", sans-serif, system-ui;
|
|
77
|
+
font-weight: 300;
|
|
78
|
+
letter-spacing: 2px;
|
|
79
|
+
}
|
|
80
|
+
|
|
56
81
|
header p {
|
|
57
82
|
text-align: center;
|
|
58
83
|
text-wrap: pretty;
|
|
@@ -77,6 +102,23 @@ b {
|
|
|
77
102
|
background: hsla(286, 36%, 46%, 1.00);
|
|
78
103
|
}
|
|
79
104
|
|
|
105
|
+
.socials-dash {
|
|
106
|
+
opacity: 1;
|
|
107
|
+
transition: opacity 1s ease-in-out;
|
|
108
|
+
position: fixed;
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
justify-content: center;
|
|
112
|
+
gap: 15px;
|
|
113
|
+
top: 10px;
|
|
114
|
+
right: 10px;
|
|
115
|
+
z-index: 10;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.hide {
|
|
119
|
+
opacity: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
80
122
|
.sec {
|
|
81
123
|
margin-top: 15px;
|
|
82
124
|
margin-bottom: 15px;
|
|
@@ -85,25 +127,30 @@ b {
|
|
|
85
127
|
font-weight: 400;
|
|
86
128
|
}
|
|
87
129
|
|
|
88
|
-
.components-grid
|
|
130
|
+
.components-grid,
|
|
131
|
+
.components-grid-full {
|
|
89
132
|
font-family: "Manjari", sans-serif, system-ui;
|
|
90
133
|
display: grid;
|
|
91
134
|
grid-template-columns: 1fr 2fr;
|
|
92
135
|
gap: 24px;
|
|
93
|
-
|
|
94
|
-
margin: 0 auto;
|
|
136
|
+
margin: 0 5%;
|
|
95
137
|
padding: 0 20px;
|
|
96
138
|
}
|
|
97
139
|
|
|
140
|
+
.components-grid-full {
|
|
141
|
+
grid-template-columns: 3fr;
|
|
142
|
+
}
|
|
143
|
+
|
|
98
144
|
.component-card {
|
|
145
|
+
min-width: 300px;
|
|
99
146
|
display: flex;
|
|
100
147
|
flex-direction: column;
|
|
101
148
|
gap: 16px;
|
|
102
|
-
padding:
|
|
103
|
-
background: rgba(36, 36, 36, 0.
|
|
149
|
+
padding: 12px;
|
|
150
|
+
background: rgba(36, 36, 36, 0.8);
|
|
104
151
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
105
152
|
border-radius: 4px;
|
|
106
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
153
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 25px rgb(80, 131, 172, 0.05) inset;
|
|
107
154
|
transition: border-color 0.2s ease;
|
|
108
155
|
}
|
|
109
156
|
|
|
@@ -117,6 +164,9 @@ b {
|
|
|
117
164
|
}
|
|
118
165
|
|
|
119
166
|
.component-header h3 {
|
|
167
|
+
width: -webkit-fill-available;
|
|
168
|
+
width: -moz-available;
|
|
169
|
+
width: stretch;
|
|
120
170
|
margin: 0;
|
|
121
171
|
font-size: 1.25rem;
|
|
122
172
|
font-weight: 500;
|
|
@@ -127,20 +177,29 @@ b {
|
|
|
127
177
|
.button-grid {
|
|
128
178
|
display: grid;
|
|
129
179
|
grid-template-columns: repeat(2, 1fr);
|
|
130
|
-
padding:
|
|
180
|
+
padding: 8px;
|
|
131
181
|
background: rgba(24, 38, 51, 0.4);
|
|
132
182
|
border: 1px dashed rgba(255, 255, 255, 0.1);
|
|
133
183
|
border-radius: 4px;
|
|
184
|
+
max-height: 350px;
|
|
185
|
+
overflow-y: auto;
|
|
134
186
|
}
|
|
135
187
|
|
|
136
|
-
.button-grid-3
|
|
188
|
+
.button-grid-3,
|
|
189
|
+
.button-grid-4 {
|
|
137
190
|
display: grid;
|
|
138
191
|
grid-template-columns: repeat(3, 1fr);
|
|
139
|
-
padding:
|
|
192
|
+
padding: 8px;
|
|
140
193
|
background: rgba(24, 38, 51, 0.4);
|
|
141
194
|
border: 1px dashed rgba(255, 255, 255, 0.1);
|
|
142
195
|
border-radius: 4px;
|
|
143
196
|
gap: 15px;
|
|
197
|
+
max-height: 350px;
|
|
198
|
+
overflow-y: auto;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.button-grid-4 {
|
|
202
|
+
grid-template-columns: repeat(4, 1fr);
|
|
144
203
|
}
|
|
145
204
|
|
|
146
205
|
.sub-text {
|
|
@@ -151,41 +210,70 @@ b {
|
|
|
151
210
|
padding: 8px;
|
|
152
211
|
}
|
|
153
212
|
|
|
213
|
+
.flex-component {
|
|
214
|
+
display: flex;
|
|
215
|
+
flex-direction: column;
|
|
216
|
+
justify-content: center;
|
|
217
|
+
align-items: center;
|
|
218
|
+
}
|
|
219
|
+
|
|
154
220
|
.code {
|
|
221
|
+
height: 25px;
|
|
155
222
|
font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
156
|
-
text-wrap: nowrap;
|
|
157
|
-
text-align: center;
|
|
158
|
-
overflow-x: auto;
|
|
159
|
-
justify-content: flex-start;
|
|
160
|
-
align-items: center;
|
|
161
|
-
padding: 5px 5px 0 5px;
|
|
162
223
|
background: hsl(220, 13%, 18%);
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
font-weight: 500;
|
|
167
|
-
margin-bottom: 15px;
|
|
224
|
+
overflow: hidden;
|
|
225
|
+
padding: 5px;
|
|
226
|
+
margin-bottom: 10px;
|
|
168
227
|
}
|
|
169
228
|
|
|
170
229
|
pre {
|
|
230
|
+
padding: 0.5rem !important;
|
|
231
|
+
text-wrap: nowrap;
|
|
171
232
|
text-align: left;
|
|
172
233
|
margin-left: 25px;
|
|
234
|
+
overflow-x: auto;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
code {
|
|
238
|
+
text-wrap: nowrap;
|
|
173
239
|
}
|
|
174
240
|
|
|
175
241
|
.code span {
|
|
176
242
|
text-wrap: nowrap;
|
|
177
243
|
}
|
|
178
244
|
|
|
245
|
+
.code-content {
|
|
246
|
+
text-wrap: nowrap;
|
|
247
|
+
border-radius: 4px;
|
|
248
|
+
font-size: 1rem;
|
|
249
|
+
color: rgba(194, 194, 194, 1);
|
|
250
|
+
font-weight: 500;
|
|
251
|
+
text-align: center;
|
|
252
|
+
line-height: 1rem;
|
|
253
|
+
display: flex;
|
|
254
|
+
justify-content: center;
|
|
255
|
+
align-items: center;
|
|
256
|
+
position: absolute;
|
|
257
|
+
top: 0;
|
|
258
|
+
left: 0;
|
|
259
|
+
height: 100%;
|
|
260
|
+
overflow-x: auto;
|
|
261
|
+
}
|
|
262
|
+
|
|
179
263
|
.html-red {
|
|
180
|
-
color: rgba(255, 84, 84, 1);
|
|
264
|
+
color: rgba(255, 84, 84, 1) !important;
|
|
181
265
|
}
|
|
182
266
|
|
|
183
267
|
.html-orange {
|
|
184
|
-
color: rgba(255, 158, 79, 1);
|
|
268
|
+
color: rgba(255, 158, 79, 1) !important;
|
|
185
269
|
}
|
|
186
270
|
|
|
187
271
|
.html-green {
|
|
188
|
-
color: rgba(101, 255, 121, 1);
|
|
272
|
+
color: rgba(101, 255, 121, 1) !important;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.html-gray {
|
|
276
|
+
color: rgb(182, 182, 182) !important;
|
|
189
277
|
}
|
|
190
278
|
|
|
191
279
|
.w-full {
|
|
@@ -194,33 +282,164 @@ pre {
|
|
|
194
282
|
width: stretch;
|
|
195
283
|
}
|
|
196
284
|
|
|
197
|
-
|
|
198
|
-
:
|
|
199
|
-
|
|
200
|
-
|
|
285
|
+
.ready-for-slosh:hover {
|
|
286
|
+
cursor: pointer;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.slosh {
|
|
290
|
+
animation: pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1, slosh 6s ease-in-out 1;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.copy-button {
|
|
294
|
+
user-select: none;
|
|
295
|
+
position: absolute;
|
|
296
|
+
cursor: pointer;
|
|
297
|
+
color: white;
|
|
298
|
+
width: 1rem;
|
|
299
|
+
height: 1rem;
|
|
300
|
+
background-color: transparent;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.copy-button:active {
|
|
304
|
+
scale: 0.9;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.copy-button#copy-import {
|
|
308
|
+
top: 50%;
|
|
309
|
+
right: 5px;
|
|
310
|
+
transform: translateY(-50%);
|
|
311
|
+
padding: 2px;
|
|
312
|
+
border-radius: 2px;
|
|
313
|
+
background-color: hsl(220, 13%, 18%);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.copy-button:hover {
|
|
317
|
+
color: rgba(255, 65, 65, 1);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
@keyframes pop {
|
|
321
|
+
50% {
|
|
322
|
+
scale: 0.8;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
@keyframes slosh {
|
|
327
|
+
0% {
|
|
328
|
+
filter: hue-rotate(300deg);
|
|
329
|
+
--degrees: 12deg;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
10% {
|
|
333
|
+
--degrees: 0deg;
|
|
201
334
|
}
|
|
202
|
-
} */
|
|
203
335
|
|
|
204
|
-
|
|
336
|
+
20% {
|
|
337
|
+
--degrees: 8deg;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
30% {
|
|
341
|
+
--degrees: 0deg;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
40% {
|
|
345
|
+
--degrees: 6deg;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
50% {
|
|
349
|
+
--degrees: 0deg;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
60% {
|
|
353
|
+
--degrees: 4deg;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
70% {
|
|
357
|
+
--degrees: 0deg;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
80% {
|
|
361
|
+
--degrees: 3deg;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
90% {
|
|
365
|
+
--degrees: 1deg;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
100% {
|
|
369
|
+
filter: hue-rotate(0deg);
|
|
370
|
+
--degrees: 2deg;
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
@media screen and (width < 1280px) {
|
|
375
|
+
.button-grid-3 {
|
|
376
|
+
grid-template-columns: repeat(2, 1fr);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.button-grid-4 {
|
|
380
|
+
grid-template-columns: repeat(3, 1fr);
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
@media screen and (width < 1024px) {
|
|
205
385
|
header h1 {
|
|
206
|
-
font-size:
|
|
386
|
+
font-size: 3.5rem;
|
|
207
387
|
-webkit-text-stroke-width: 1px;
|
|
208
|
-
background-image: linear-gradient(2deg, rgb(255, 255, 255) 39%, transparent 39.5%);
|
|
209
388
|
}
|
|
210
389
|
|
|
211
390
|
header p {
|
|
212
|
-
font-size:
|
|
391
|
+
font-size: 1.5rem;
|
|
213
392
|
}
|
|
214
393
|
|
|
215
394
|
.sec {
|
|
216
395
|
font-size: 1.25rem;
|
|
217
396
|
}
|
|
218
397
|
|
|
219
|
-
.
|
|
220
|
-
grid-template-columns: 1fr;
|
|
398
|
+
.button-grid {
|
|
399
|
+
grid-template-columns: repeat(1, 1fr);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.code-content {
|
|
403
|
+
justify-content: flex-start;
|
|
221
404
|
}
|
|
222
405
|
|
|
223
406
|
.button-grid-3 {
|
|
407
|
+
grid-template-columns: repeat(1, 1fr);
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.button-grid-4 {
|
|
224
411
|
grid-template-columns: repeat(2, 1fr);
|
|
225
412
|
}
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
@media screen and (width < 768px) {
|
|
416
|
+
.components-grid {
|
|
417
|
+
grid-template-columns: 1fr;
|
|
418
|
+
align-items: center;
|
|
419
|
+
justify-content: center;
|
|
420
|
+
margin: 0 2%;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.components-grid-full {
|
|
424
|
+
margin: 0 2%;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
header h1 {
|
|
428
|
+
font-size: 3.0rem;
|
|
429
|
+
-webkit-text-stroke-width: 1px;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.socials-dash {
|
|
433
|
+
background: rgb(0, 0, 0, 0.25);
|
|
434
|
+
padding: 7px 0;
|
|
435
|
+
position: unset;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.component-header h3 {
|
|
439
|
+
text-align: center;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.button-grid-4 {
|
|
443
|
+
grid-template-columns: repeat(1, 1fr);
|
|
444
|
+
}
|
|
226
445
|
}
|
package/dist/index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8" />
|
|
6
|
-
<link rel="icon" type="image/
|
|
6
|
+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
8
|
<title>n-components</title>
|
|
9
9
|
<link rel="stylesheet" href="index.css" />
|
|
@@ -13,152 +13,205 @@
|
|
|
13
13
|
</head>
|
|
14
14
|
|
|
15
15
|
<body>
|
|
16
|
+
<div class="socials-dash">
|
|
17
|
+
<a href=" https://www.npmjs.com/package/@trenoxxious/n-components" target="_blank" style="height: 2.5rem;">
|
|
18
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="2.5rem" fill="white">
|
|
19
|
+
<path
|
|
20
|
+
d="M288 288l-32 0 0-64 32 0 0 64zM576 160l0 192-288 0 0 32-128 0 0-32-160 0 0-192 576 0zM160 192l-128 0 0 128 64 0 0-96 32 0 0 96 32 0 0-128zm160 0l-128 0 0 160 64 0 0-32 64 0 0-128zm224 0l-192 0 0 128 64 0 0-96 32 0 0 96 32 0 0-96 32 0 0 96 32 0 0-128z" />
|
|
21
|
+
</svg>
|
|
22
|
+
</a>
|
|
23
|
+
<a href="https://github.com/Trenoxxious/n-components" target="_blank" style="height: 2.5rem;">
|
|
24
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="2.5rem" fill="white">
|
|
25
|
+
<path
|
|
26
|
+
d="M448 96c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM265.8 407.7c0-1.8 0-6 .1-11.6 .1-11.4 .1-28.8 .1-43.7 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-26.6-7.5-56.6-7.5-83.2 0 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 9 .1 21.7 .1 30.6 0 4.8 .1 8.6 .1 10 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7 .6 3.9 1.9 .3 1.3-1 2.6-3 3-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7 .9 3.7 2.4 0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1 .9-1.1 2.8-.9 4.3 .6 1.3 1.3 1.8 3.3 .9 4.1-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9 1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5 .9-.9 2.4-.4 3.5 .6 1.1 1.3 1.3 2.8 .4 3.5-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6 .4-.6 1.5-.9 2.8-.4 1.3 .7 1.9 1.8 1.5 2.6-.4 .9-1.7 1.1-2.8 .4z" />
|
|
27
|
+
</svg>
|
|
28
|
+
</a>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
16
31
|
<header>
|
|
17
|
-
<h1 style="rotate: -2deg;">
|
|
32
|
+
<h1 style="rotate: -2deg;" class="ready-for-slosh">
|
|
18
33
|
n-components!
|
|
19
34
|
</h1>
|
|
20
|
-
<
|
|
35
|
+
<h2 style="font-size: 1rem;">Stable Release Version: <span class="html-green" id="current-version"></span>
|
|
36
|
+
</h2>
|
|
37
|
+
<script>
|
|
38
|
+
const header = document.querySelector('header h1');
|
|
39
|
+
let sloshed = false;
|
|
40
|
+
|
|
41
|
+
header.addEventListener('click', () => {
|
|
42
|
+
if (!sloshed) {
|
|
43
|
+
sloshed = true;
|
|
44
|
+
header.classList.remove('ready-for-slosh');
|
|
45
|
+
header.classList.add('slosh');
|
|
46
|
+
setTimeout(() => {
|
|
47
|
+
header.classList.remove('slosh');
|
|
48
|
+
header.classList.add('ready-for-slosh');
|
|
49
|
+
sloshed = false;
|
|
50
|
+
}, 6000);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
<p>Simple, lightweight web components for use with vanilla HTML, JS and CSS.</p>
|
|
21
55
|
</header>
|
|
22
|
-
<p style="margin-left: 5%; margin-right: 5%;">Import the latest version of <b>n-components</b>
|
|
23
|
-
|
|
56
|
+
<p style="margin-left: 5%; margin-right: 5%;">Import the latest version of <b class="html-red">n-components</b>
|
|
57
|
+
into
|
|
58
|
+
your static
|
|
59
|
+
vanilla
|
|
60
|
+
HTML file using:</p>
|
|
24
61
|
<div class="code"
|
|
25
|
-
style="padding-bottom: 5px; margin-left: 5%; margin-right: 5%;
|
|
26
|
-
|
|
27
|
-
class="html-
|
|
28
|
-
|
|
29
|
-
|
|
62
|
+
style="padding-bottom: 5px; margin-left: 5%; margin-right: 5%; margin-bottom: 0; position: relative;">
|
|
63
|
+
<div class="code-content w-full">
|
|
64
|
+
<<span class="html-red">script</span> <span class="html-orange">src<span
|
|
65
|
+
class="html-gray">=</span></span><span
|
|
66
|
+
class="html-green">"https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"</span>></<span
|
|
67
|
+
class="html-red">script</span>>
|
|
68
|
+
</div>
|
|
69
|
+
<n-copy dark background="hsl(220, 13%, 18%)" position="right"
|
|
70
|
+
copy='<script src="https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"></script>'></n-copy>
|
|
71
|
+
</div>
|
|
72
|
+
<p style="margin-left: 5%; margin-right: 5%; margin-bottom: 50px; margin-top: 10px;">Then, simply call any of
|
|
73
|
+
the below <b class="html-red">n-components</b> to get started.</p>
|
|
74
|
+
|
|
75
|
+
<!-- Utility -->
|
|
76
|
+
<p class="sec" style="margin-left: 5%; margin-right: 5%;">We have useful out-of-the-box utility. Take a peek at
|
|
77
|
+
things like <span class="html-red"><b>n-</b>copy</span>!
|
|
78
|
+
</p>
|
|
79
|
+
<div class="components-grid-full" style="margin-bottom: 50px;">
|
|
80
|
+
<div class="component-card">
|
|
81
|
+
<div class="component-header">
|
|
82
|
+
<h3 class="html-red">n-utility</h3>
|
|
83
|
+
<p>Various quick utility to make things <strong>easy</strong> and intuitive. Visit the <a class="link"
|
|
84
|
+
href="https://github.com/Trenoxxious/n-components" target="_blank">n-components Github</a> to
|
|
85
|
+
view the specifics of using n-utility.</p>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="button-grid-4">
|
|
88
|
+
<div class="flex-component">
|
|
89
|
+
<pre><code class="language-html"><n-copy dark copy="127.0.0.1"></n-copy></code></pre>
|
|
90
|
+
<div>A simple copy-to-clipboard button.</div>
|
|
91
|
+
<n-copy dark copy="127.0.0.1"></n-copy>
|
|
92
|
+
<div style="margin-top: 10px;">
|
|
93
|
+
<p style="font-size: 12px;">Accepts: <span class="sub-text">dark, copy, background,
|
|
94
|
+
position</span></p>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<!-- Buttons -->
|
|
30
102
|
<p class="sec" style="margin-left: 5%; margin-right: 5%;">You want some buttons? We have some cool, customizable
|
|
31
103
|
<span class="html-red"><b>n-</b>button</span>s.
|
|
32
104
|
</p>
|
|
33
105
|
<div class="components-grid" style="margin-bottom: 50px;">
|
|
34
106
|
<div class="component-card">
|
|
35
107
|
<div class="component-header">
|
|
36
|
-
<h3>
|
|
37
|
-
<p>
|
|
108
|
+
<h3 class="html-red">n-button</h3>
|
|
109
|
+
<p>Basic usage:</p>
|
|
38
110
|
<pre><code class="language-html"><n-button>Button</n-button></code></pre>
|
|
39
|
-
<p>Output:</p>
|
|
40
|
-
<n-button>Button</n-button>
|
|
41
111
|
</div>
|
|
42
|
-
<p>
|
|
112
|
+
<p style="margin-bottom: 12px;">Variants:</p>
|
|
43
113
|
<div class="button-grid">
|
|
44
114
|
<n-button variant="normal">Normal</n-button>
|
|
45
115
|
<n-button variant="info">Info</n-button>
|
|
46
116
|
<n-button variant="warning">Warning</n-button>
|
|
47
117
|
<n-button variant="alert">Alert</n-button>
|
|
48
118
|
<n-button variant="success">Success</n-button>
|
|
119
|
+
<n-button animation="very-slow" variant="alert">Cancel</n-button>
|
|
120
|
+
<n-button background="rgba(79, 224, 188, 1)" animation="fast">Sign Up</n-button>
|
|
121
|
+
<n-button outlineOnly dark animation="fast" scaleOnHover dontPunch>Dark Mode</n-button>
|
|
49
122
|
</div>
|
|
50
123
|
</div>
|
|
51
124
|
<div class="component-card">
|
|
52
125
|
<div class="component-header">
|
|
53
|
-
<h3>
|
|
54
|
-
<p
|
|
126
|
+
<h3><span class="html-red">n-button</span> Attributes</h3>
|
|
127
|
+
<p style="margin-bottom: 16px;">Combine any attributes to customize behavior and appearance.</p>
|
|
55
128
|
</div>
|
|
56
129
|
<div class="button-grid-3">
|
|
57
130
|
<div>
|
|
58
|
-
<div class="code html-orange">variant
|
|
59
|
-
|
|
60
|
-
<
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">normal</span></p>
|
|
65
|
-
</div>
|
|
131
|
+
<div class="code html-orange">variant<span class="html-gray">=</span><span
|
|
132
|
+
class="html-green">"info"</span></div>
|
|
133
|
+
<p style="font-size: 13px; margin: 4px 0;">Theme type.</p>
|
|
134
|
+
<n-button variant="info" style="margin: 8px 0;">Button</n-button>
|
|
135
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Options:</span> <span
|
|
136
|
+
class="sub-text">normal, info, warning, alert, success</span></p>
|
|
66
137
|
</div>
|
|
67
138
|
<div>
|
|
68
|
-
<div class="code html-orange">
|
|
69
|
-
|
|
70
|
-
<
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
139
|
+
<div class="code html-orange">animation<span class="html-gray">=</span><span
|
|
140
|
+
class="html-green">"fast"</span></div>
|
|
141
|
+
<p style="font-size: 13px; margin: 4px 0;">Animation speed.</p>
|
|
142
|
+
<n-button animation="fast" style="margin: 8px 0;">Fast</n-button>
|
|
143
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Options:</span> <span
|
|
144
|
+
class="sub-text">fast, normal, slow, very-slow</span></p>
|
|
74
145
|
</div>
|
|
75
146
|
<div>
|
|
76
|
-
<div class="code html-orange">
|
|
77
|
-
|
|
78
|
-
<
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
147
|
+
<div class="code html-orange">background<span class="html-gray">=</span><span
|
|
148
|
+
class="html-green">"#cd50ec"</span></div>
|
|
149
|
+
<p style="font-size: 13px; margin: 4px 0;">Background color.</p>
|
|
150
|
+
<n-button background="#cd50ec" style="margin: 8px 0;">Custom</n-button>
|
|
151
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Accepts:</span> <span
|
|
152
|
+
class="sub-text">CSS color values</span></p>
|
|
82
153
|
</div>
|
|
83
154
|
<div>
|
|
84
|
-
<div class="code html-orange">
|
|
85
|
-
<
|
|
86
|
-
<n-button
|
|
87
|
-
<
|
|
88
|
-
<p style="font-size: 12px;">Accepts: <span class="sub-text">fast, normal, slow or
|
|
89
|
-
very-slow</span></p>
|
|
90
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">normal</span></p>
|
|
91
|
-
</div>
|
|
155
|
+
<div class="code html-orange">scaleOnHover</div>
|
|
156
|
+
<p style="font-size: 13px; margin: 4px 0;">Scales on hover.</p>
|
|
157
|
+
<n-button scaleOnHover style="margin: 8px 0;">Scales!</n-button>
|
|
158
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
92
159
|
</div>
|
|
93
160
|
<div>
|
|
94
161
|
<div class="code html-orange">thick</div>
|
|
95
|
-
<
|
|
96
|
-
<n-button thick>Thick
|
|
97
|
-
<
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
101
|
-
</div>
|
|
162
|
+
<p style="font-size: 13px; margin: 4px 0;">Largest variant.</p>
|
|
163
|
+
<n-button thick style="margin: 8px 0;">Thick</n-button>
|
|
164
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span> · Overrides
|
|
165
|
+
<span class="html-orange">thin</span>
|
|
166
|
+
</p>
|
|
102
167
|
</div>
|
|
103
168
|
<div>
|
|
104
169
|
<div class="code html-orange">thin</div>
|
|
105
|
-
<
|
|
106
|
-
<n-button thin>Thin
|
|
107
|
-
<
|
|
108
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
109
|
-
</div>
|
|
170
|
+
<p style="font-size: 13px; margin: 4px 0;">Smallest variant.</p>
|
|
171
|
+
<n-button thin style="margin: 8px 0;">Thin</n-button>
|
|
172
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
110
173
|
</div>
|
|
111
174
|
<div>
|
|
112
|
-
<div class="code html-orange">
|
|
113
|
-
<
|
|
114
|
-
<n-button
|
|
115
|
-
<
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
<span class="html-orange">dark</span>.
|
|
119
|
-
</p>
|
|
120
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
121
|
-
</div>
|
|
175
|
+
<div class="code html-orange">rounded</div>
|
|
176
|
+
<p style="font-size: 13px; margin: 4px 0;">Rounded corners.</p>
|
|
177
|
+
<n-button rounded style="margin: 8px 0;">Rounded</n-button>
|
|
178
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span> · Overridden by
|
|
179
|
+
<span class="html-orange">sharp</span>
|
|
180
|
+
</p>
|
|
122
181
|
</div>
|
|
123
182
|
<div>
|
|
124
183
|
<div class="code html-orange">outlineOnly</div>
|
|
125
|
-
<
|
|
126
|
-
<n-button outlineOnly dark>Outline</n-button>
|
|
127
|
-
<
|
|
128
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
129
|
-
</div>
|
|
184
|
+
<p style="font-size: 13px; margin: 4px 0;">Outline style.</p>
|
|
185
|
+
<n-button outlineOnly dark style="margin: 8px 0;">Outline</n-button>
|
|
186
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
130
187
|
</div>
|
|
131
188
|
<div>
|
|
132
|
-
<div class="code html-orange">
|
|
133
|
-
<
|
|
134
|
-
<n-button
|
|
135
|
-
<
|
|
136
|
-
<p style="font-size: 12px;">Accepts: <span class="sub-text">any CSS-valid color string</span>
|
|
137
|
-
</p>
|
|
138
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">null</span></p>
|
|
139
|
-
</div>
|
|
140
|
-
</div>
|
|
141
|
-
<div>
|
|
142
|
-
<div class="code html-orange">rounded</div>
|
|
143
|
-
<div>Rounds the corners.</div>
|
|
144
|
-
<n-button rounded>Rounded</n-button>
|
|
145
|
-
<div style="margin-top: 10px;">
|
|
146
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
|
-
<div>
|
|
150
|
-
<div class="code html-orange">sharp</div>
|
|
151
|
-
<div>Sharpens the corners.</div>
|
|
152
|
-
<n-button sharp>Sharp</n-button>
|
|
153
|
-
<div style="margin-top: 10px;">
|
|
154
|
-
<p style="font-size: 12px;">Overrides: <span class="html-orange">rounded</span>
|
|
155
|
-
</p>
|
|
156
|
-
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
157
|
-
</div>
|
|
189
|
+
<div class="code html-orange">dontPunch</div>
|
|
190
|
+
<p style="font-size: 13px; margin: 4px 0;">Disable click reaction.</p>
|
|
191
|
+
<n-button dontPunch style="margin: 8px 0;">Static</n-button>
|
|
192
|
+
<p style="font-size: 11px; margin-top: 8px;"><span class="html-gray">Boolean</span></p>
|
|
158
193
|
</div>
|
|
159
194
|
</div>
|
|
160
195
|
</div>
|
|
161
196
|
</div>
|
|
197
|
+
<script>
|
|
198
|
+
const currentVersionDisplay = document.getElementById('current-version');
|
|
199
|
+
const currentVersionNum = '1.0.12';
|
|
200
|
+
|
|
201
|
+
currentVersionDisplay.innerText = currentVersionNum;
|
|
202
|
+
|
|
203
|
+
window.addEventListener('scroll', () => {
|
|
204
|
+
if (window.scrollY > 10) {
|
|
205
|
+
if (document.querySelector('.socials-dash')) {
|
|
206
|
+
document.querySelector('.socials-dash').classList.add('hide');
|
|
207
|
+
}
|
|
208
|
+
} else {
|
|
209
|
+
if (document.querySelector('.socials-dash')) {
|
|
210
|
+
document.querySelector('.socials-dash').classList.remove('hide');
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
</script>
|
|
162
215
|
</body>
|
|
163
216
|
|
|
164
217
|
</html>
|
package/dist/n-components.es.js
CHANGED
|
@@ -531,7 +531,7 @@ function __decorate(x, j, F, U) {
|
|
|
531
531
|
}
|
|
532
532
|
var NButton = class extends i {
|
|
533
533
|
constructor(...x) {
|
|
534
|
-
super(...x), this.variant = "normal", this.thin = !1, this.thick = !1, this.outlineOnly = !1, this.scaleOnHover = !1, this.rounded = !1, this.sharp = !1, this.dark = !1, this.dontPunch = !1, this.animation = "normal", this.type = "button", this.id = "", this.name = "", this.disabled = !1, this.form = "", this.formaction = "", this.formmethod = "", this.formnovalidate = !1, this.formtarget = "", this.title = "", this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "", this.
|
|
534
|
+
super(...x), this.variant = "normal", this.thin = !1, this.thick = !1, this.outlineOnly = !1, this.scaleOnHover = !1, this.rounded = !1, this.sharp = !1, this.dark = !1, this.dontPunch = !1, this.animation = "normal", this.type = "button", this.id = "", this.name = "", this.disabled = !1, this.form = "", this.formaction = "", this.formmethod = "", this.formnovalidate = !1, this.formtarget = "", this.title = "", this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "", this.background = "", this.borderColor = "", this.textColor = "";
|
|
535
535
|
}
|
|
536
536
|
static #e = this.properties = {
|
|
537
537
|
variant: { type: String },
|
|
@@ -543,9 +543,11 @@ var NButton = class extends i {
|
|
|
543
543
|
sharp: { type: Boolean },
|
|
544
544
|
scaleOnHover: { type: Boolean },
|
|
545
545
|
dark: { type: Boolean },
|
|
546
|
-
|
|
546
|
+
background: { type: String },
|
|
547
|
+
textColor: { type: String },
|
|
547
548
|
borderColor: { type: String },
|
|
548
549
|
dontPunch: { type: Boolean },
|
|
550
|
+
style: { type: String },
|
|
549
551
|
type: { type: String },
|
|
550
552
|
id: { type: String },
|
|
551
553
|
name: { type: String },
|
|
@@ -675,7 +677,7 @@ var NButton = class extends i {
|
|
|
675
677
|
transition: all 0.45s;
|
|
676
678
|
}
|
|
677
679
|
|
|
678
|
-
.animation-
|
|
680
|
+
.animation-very-slow {
|
|
679
681
|
transition: all 1s;
|
|
680
682
|
}
|
|
681
683
|
|
|
@@ -694,7 +696,7 @@ var NButton = class extends i {
|
|
|
694
696
|
}
|
|
695
697
|
`;
|
|
696
698
|
render() {
|
|
697
|
-
let x = (this.variant === "normal" || this.variant === "success") && this.dark ? this.variant === "normal" ? "white" : "#2cff72ff" : "", j = this.variant === "normal" && this.
|
|
699
|
+
let x = (this.variant === "normal" || this.variant === "success") && this.dark ? this.variant === "normal" ? "white" : "#2cff72ff" : "", j = this.variant === "normal" && this.background !== "" ? this.background : null, F = this.borderColor || null, U = this.textColor || null;
|
|
698
700
|
return b`<button
|
|
699
701
|
type="${this.type}"
|
|
700
702
|
?disabled="${this.disabled}"
|
|
@@ -709,11 +711,104 @@ var NButton = class extends i {
|
|
|
709
711
|
aria-label="${this.ariaLabel || ""}"
|
|
710
712
|
aria-describedby="${this.ariaDescribedby || ""}"
|
|
711
713
|
aria-pressed="${this.ariaPressed || ""}"
|
|
712
|
-
class="${this.variant}${this.
|
|
713
|
-
style="${x ? `color: ${x}; ` : ""}${j && !this.outlineOnly ? `background
|
|
714
|
+
class="${this.variant}${this.background || this.borderColor ? " custom-color" : ""}${this.dontPunch ? " dont-punch" : ""}${this.thin && !this.thick ? " thin" : this.thick ? " thick" : ""}${this.outlineOnly ? " outline-only" : ""}${this.scaleOnHover ? " scale-hover" : ""}${this.rounded && !this.sharp ? " rounded" : this.sharp ? " sharp" : ""} animation-${this.animation}"
|
|
715
|
+
style="${x ? `color: ${x}; ` : ""}${j && !this.outlineOnly ? `background: ${j}; ` : ""}${j && !F ? `border: 1px solid color-mix(in hsl, ${j} 100%, white 10%); ` : F ? `border: 1px solid ${F}; ` : ""}${U ? `color: ${U}; ` : ""}${this.style}">
|
|
714
716
|
<slot></slot>
|
|
715
717
|
</button>`;
|
|
716
718
|
}
|
|
717
719
|
};
|
|
718
720
|
NButton = __decorate([t("n-button")], NButton);
|
|
719
|
-
|
|
721
|
+
var NCopy = class extends i {
|
|
722
|
+
constructor(...x) {
|
|
723
|
+
super(...x), this.position = "block", this.dark = !1, this.copy = "", this.background = "", this.size = "small", this.id = "", this.name = "", this.disabled = !1, this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "";
|
|
724
|
+
}
|
|
725
|
+
static #e = this.properties = {
|
|
726
|
+
dark: { type: Boolean },
|
|
727
|
+
copy: { type: String },
|
|
728
|
+
position: { type: String },
|
|
729
|
+
background: { type: String },
|
|
730
|
+
size: { type: String },
|
|
731
|
+
id: { type: String },
|
|
732
|
+
style: { type: String },
|
|
733
|
+
name: { type: String },
|
|
734
|
+
disabled: { type: Boolean },
|
|
735
|
+
ariaLabel: {
|
|
736
|
+
type: String,
|
|
737
|
+
attribute: "aria-label"
|
|
738
|
+
},
|
|
739
|
+
ariaDescribedby: {
|
|
740
|
+
type: String,
|
|
741
|
+
attribute: "aria-describedby"
|
|
742
|
+
},
|
|
743
|
+
ariaPressed: {
|
|
744
|
+
type: String,
|
|
745
|
+
attribute: "aria-pressed"
|
|
746
|
+
}
|
|
747
|
+
};
|
|
748
|
+
static #t = this.styles = i$1`
|
|
749
|
+
.copy-button {
|
|
750
|
+
display: block;
|
|
751
|
+
cursor: pointer;
|
|
752
|
+
user-select: none;
|
|
753
|
+
padding: 4px;
|
|
754
|
+
border-radius: 4px;
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
.copy-button:active {
|
|
758
|
+
scale: 0.90;
|
|
759
|
+
}
|
|
760
|
+
`;
|
|
761
|
+
render() {
|
|
762
|
+
let x = "16px", j = "";
|
|
763
|
+
switch (this.size === "medium" ? x = "24px" : this.size === "large" && (x = "32px"), this.position) {
|
|
764
|
+
case "top right":
|
|
765
|
+
j = "position: absolute; top: 0; right: 0;";
|
|
766
|
+
break;
|
|
767
|
+
case "bottom right":
|
|
768
|
+
j = "position: absolute; bottom: 0; right: 0;";
|
|
769
|
+
break;
|
|
770
|
+
case "top left":
|
|
771
|
+
j = "position: absolute; top: 0; left: 0;";
|
|
772
|
+
break;
|
|
773
|
+
case "bottom left":
|
|
774
|
+
j = "position: absolute; bottom: 0; left: 0;";
|
|
775
|
+
break;
|
|
776
|
+
case "top":
|
|
777
|
+
j = "position: absolute; top: 0; right: 50%; transform: translateX(-50%);";
|
|
778
|
+
break;
|
|
779
|
+
case "bottom":
|
|
780
|
+
j = "position: absolute; bottom: 0; right: 50%; transform: translateX(-50%);";
|
|
781
|
+
break;
|
|
782
|
+
case "left":
|
|
783
|
+
j = "position: absolute; left: 0; top: 50%; transform: translateY(-50%);";
|
|
784
|
+
break;
|
|
785
|
+
case "right":
|
|
786
|
+
j = "position: absolute; right: 0; top: 50%; transform: translateY(-50%);";
|
|
787
|
+
break;
|
|
788
|
+
case "block":
|
|
789
|
+
default:
|
|
790
|
+
j = "position: unset;";
|
|
791
|
+
break;
|
|
792
|
+
}
|
|
793
|
+
return b`<div
|
|
794
|
+
?disabled="${this.disabled}"
|
|
795
|
+
id="${this.id || ""}"
|
|
796
|
+
@click="${this.handleCopy}"
|
|
797
|
+
name="${this.name || ""}"
|
|
798
|
+
copy="${this.copy || ""}"
|
|
799
|
+
aria-label="${this.ariaLabel || ""}"
|
|
800
|
+
aria-describedby="${this.ariaDescribedby || ""}"
|
|
801
|
+
aria-pressed="${this.ariaPressed || ""}"
|
|
802
|
+
class="copy-button"
|
|
803
|
+
style="${j}${` width: ${x}; height: ${x};`}${this.background === "" ? "" : ` background: ${this.background};`}${this.style ? ` ${this.style}` : ""}">
|
|
804
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="${this.dark ? "white" : "black"}">
|
|
805
|
+
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/>
|
|
806
|
+
</svg>
|
|
807
|
+
</div>`;
|
|
808
|
+
}
|
|
809
|
+
handleCopy() {
|
|
810
|
+
navigator.clipboard.writeText(this.copy);
|
|
811
|
+
}
|
|
812
|
+
};
|
|
813
|
+
NCopy = __decorate([t("n-copy")], NCopy);
|
|
814
|
+
export { NButton, NCopy };
|
package/dist/n-components.umd.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.nComponents={}))})(this,function(e){var t=globalThis,n=t.ShadowRoot&&(t.ShadyCSS===void 0||t.ShadyCSS.nativeShadow)&&`adoptedStyleSheets`in Document.prototype&&`replace`in CSSStyleSheet.prototype,r=Symbol(),i=new WeakMap,a=class{constructor(e,t,n){if(this._$cssResult$=!0,n!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(n&&e===void 0){let n=t!==void 0&&t.length===1;n&&(e=i.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),n&&i.set(t,e))}return e}toString(){return this.cssText}},o=e=>new a(typeof e==`string`?e:e+``,void 0,r),s=(e,...t)=>new a(e.length===1?e[0]:t.reduce((t,n,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if(typeof e==`number`)return e;throw Error(`Value passed to 'css' function must be a 'css' function result: `+e+`. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(n)+e[r+1],e[0]),e,r),c=(e,r)=>{if(n)e.adoptedStyleSheets=r.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let n of r){let r=document.createElement(`style`),i=t.litNonce;i!==void 0&&r.setAttribute(`nonce`,i),r.textContent=n.cssText,e.appendChild(r)}},l=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t=``;for(let n of e.cssRules)t+=n.cssText;return o(t)})(e):e,{is:u,defineProperty:d,getOwnPropertyDescriptor:ee,getOwnPropertyNames:te,getOwnPropertySymbols:
|
|
2
|
-
\f\r]`,
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.nComponents={}))})(this,function(e){var t=globalThis,n=t.ShadowRoot&&(t.ShadyCSS===void 0||t.ShadyCSS.nativeShadow)&&`adoptedStyleSheets`in Document.prototype&&`replace`in CSSStyleSheet.prototype,r=Symbol(),i=new WeakMap,a=class{constructor(e,t,n){if(this._$cssResult$=!0,n!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(n&&e===void 0){let n=t!==void 0&&t.length===1;n&&(e=i.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),n&&i.set(t,e))}return e}toString(){return this.cssText}},o=e=>new a(typeof e==`string`?e:e+``,void 0,r),s=(e,...t)=>new a(e.length===1?e[0]:t.reduce((t,n,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if(typeof e==`number`)return e;throw Error(`Value passed to 'css' function must be a 'css' function result: `+e+`. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(n)+e[r+1],e[0]),e,r),c=(e,r)=>{if(n)e.adoptedStyleSheets=r.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let n of r){let r=document.createElement(`style`),i=t.litNonce;i!==void 0&&r.setAttribute(`nonce`,i),r.textContent=n.cssText,e.appendChild(r)}},l=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t=``;for(let n of e.cssRules)t+=n.cssText;return o(t)})(e):e,{is:u,defineProperty:d,getOwnPropertyDescriptor:ee,getOwnPropertyNames:te,getOwnPropertySymbols:ne,getPrototypeOf:re}=Object,f=globalThis,p=f.trustedTypes,ie=p?p.emptyScript:``,ae=f.reactiveElementPolyfillSupport,m=(e,t)=>e,h={toAttribute(e,t){switch(t){case Boolean:e=e?ie:null;break;case Object:case Array:e=e==null?e:JSON.stringify(e)}return e},fromAttribute(e,t){let n=e;switch(t){case Boolean:n=e!==null;break;case Number:n=e===null?null:Number(e);break;case Object:case Array:try{n=JSON.parse(e)}catch{n=null}}return n}},g=(e,t)=>!u(e,t),_={attribute:!0,type:String,converter:h,reflect:!1,useDefault:!1,hasChanged:g};Symbol.metadata??=Symbol(`metadata`),f.litPropertyMetadata??=new WeakMap;var v=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=_){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){let n=Symbol(),r=this.getPropertyDescriptor(e,n,t);r!==void 0&&d(this.prototype,e,r)}}static getPropertyDescriptor(e,t,n){let{get:r,set:i}=ee(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){let a=r?.call(this);i?.call(this,t),this.requestUpdate(e,a,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??_}static _$Ei(){if(this.hasOwnProperty(m(`elementProperties`)))return;let e=re(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(m(`finalized`)))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m(`properties`))){let e=this.properties,t=[...te(e),...ne(e)];for(let n of t)this.createProperty(n,e[n])}let e=this[Symbol.metadata];if(e!==null){let t=litPropertyMetadata.get(e);if(t!==void 0)for(let[e,n]of t)this.elementProperties.set(e,n)}this._$Eh=new Map;for(let[e,t]of this.elementProperties){let n=this._$Eu(e,t);n!==void 0&&this._$Eh.set(n,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let n=new Set(e.flat(1/0).reverse());for(let e of n)t.unshift(l(e))}else e!==void 0&&t.push(l(e));return t}static _$Eu(e,t){let n=t.attribute;return!1===n?void 0:typeof n==`string`?n:typeof e==`string`?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,t=this.constructor.elementProperties;for(let n of t.keys())this.hasOwnProperty(n)&&(e.set(n,this[n]),delete this[n]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return c(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,n){this._$AK(e,n)}_$ET(e,t){let n=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,n);if(r!==void 0&&!0===n.reflect){let i=(n.converter?.toAttribute===void 0?h:n.converter).toAttribute(t,n.type);this._$Em=e,i==null?this.removeAttribute(r):this.setAttribute(r,i),this._$Em=null}}_$AK(e,t){let n=this.constructor,r=n._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let e=n.getPropertyOptions(r),i=typeof e.converter==`function`?{fromAttribute:e.converter}:e.converter?.fromAttribute===void 0?h:e.converter;this._$Em=r;let a=i.fromAttribute(t,e.type);this[r]=a??this._$Ej?.get(r)??a,this._$Em=null}}requestUpdate(e,t,n,r=!1,i){if(e!==void 0){let a=this.constructor;if(!1===r&&(i=this[e]),n??=a.getPropertyOptions(e),!((n.hasChanged??g)(i,t)||n.useDefault&&n.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(a._$Eu(e,n))))return;this.C(e,t,n)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:n,reflect:r,wrapped:i},a){n&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,a??t??this[e]),!0!==i||a!==void 0)||(this._$AL.has(e)||(this.hasUpdated||n||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}let e=this.constructor.elementProperties;if(e.size>0)for(let[t,n]of e){let{wrapped:e}=n,r=this[t];!0!==e||this._$AL.has(t)||r===void 0||this.C(t,void 0,n,r)}}let e=!1,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}};v.elementStyles=[],v.shadowRootOptions={mode:`open`},v[m(`elementProperties`)]=new Map,v[m(`finalized`)]=new Map,ae?.({ReactiveElement:v}),(f.reactiveElementVersions??=[]).push(`2.1.2`);var y=globalThis,b=e=>e,x=y.trustedTypes,S=x?x.createPolicy(`lit-html`,{createHTML:e=>e}):void 0,C=`$lit$`,w=`lit$${Math.random().toFixed(9).slice(2)}$`,T=`?`+w,oe=`<${T}>`,E=document,D=()=>E.createComment(``),O=e=>e===null||typeof e!=`object`&&typeof e!=`function`,k=Array.isArray,se=e=>k(e)||typeof e?.[Symbol.iterator]==`function`,A=`[
|
|
2
|
+
\f\r]`,j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,N=/>/g,P=RegExp(`>|${A}(?:([^\\s"'>=/]+)(${A}*=${A}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,`g`),F=/'/g,I=/"/g,L=/^(?:script|style|textarea|title)$/i,R=(e=>(t,...n)=>({_$litType$:e,strings:t,values:n}))(1),z=Symbol.for(`lit-noChange`),B=Symbol.for(`lit-nothing`),V=new WeakMap,H=E.createTreeWalker(E,129);function U(e,t){if(!k(e)||!e.hasOwnProperty(`raw`))throw Error(`invalid template strings array`);return S===void 0?t:S.createHTML(t)}var ce=(e,t)=>{let n=e.length-1,r=[],i,a=t===2?`<svg>`:t===3?`<math>`:``,o=j;for(let t=0;t<n;t++){let n=e[t],s,c,l=-1,u=0;for(;u<n.length&&(o.lastIndex=u,c=o.exec(n),c!==null);)u=o.lastIndex,o===j?c[1]===`!--`?o=M:c[1]===void 0?c[2]===void 0?c[3]!==void 0&&(o=P):(L.test(c[2])&&(i=RegExp(`</`+c[2],`g`)),o=P):o=N:o===P?c[0]===`>`?(o=i??j,l=-1):c[1]===void 0?l=-2:(l=o.lastIndex-c[2].length,s=c[1],o=c[3]===void 0?P:c[3]===`"`?I:F):o===I||o===F?o=P:o===M||o===N?o=j:(o=P,i=void 0);let d=o===P&&e[t+1].startsWith(`/>`)?` `:``;a+=o===j?n+oe:l>=0?(r.push(s),n.slice(0,l)+C+n.slice(l)+w+d):n+w+(l===-2?t:d)}return[U(e,a+(e[n]||`<?>`)+(t===2?`</svg>`:t===3?`</math>`:``)),r]},W=class e{constructor({strings:t,_$litType$:n},r){let i;this.parts=[];let a=0,o=0,s=t.length-1,c=this.parts,[l,u]=ce(t,n);if(this.el=e.createElement(l,r),H.currentNode=this.el.content,n===2||n===3){let e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;(i=H.nextNode())!==null&&c.length<s;){if(i.nodeType===1){if(i.hasAttributes())for(let e of i.getAttributeNames())if(e.endsWith(C)){let t=u[o++],n=i.getAttribute(e).split(w),r=/([.?@])?(.*)/.exec(t);c.push({type:1,index:a,name:r[2],strings:n,ctor:r[1]===`.`?ue:r[1]===`?`?de:r[1]===`@`?fe:q}),i.removeAttribute(e)}else e.startsWith(w)&&(c.push({type:6,index:a}),i.removeAttribute(e));if(L.test(i.tagName)){let e=i.textContent.split(w),t=e.length-1;if(t>0){i.textContent=x?x.emptyScript:``;for(let n=0;n<t;n++)i.append(e[n],D()),H.nextNode(),c.push({type:2,index:++a});i.append(e[t],D())}}}else if(i.nodeType===8)if(i.data===T)c.push({type:2,index:a});else{let e=-1;for(;(e=i.data.indexOf(w,e+1))!==-1;)c.push({type:7,index:a}),e+=w.length-1}a++}}static createElement(e,t){let n=E.createElement(`template`);return n.innerHTML=e,n}};function G(e,t,n=e,r){if(t===z)return t;let i=r===void 0?n._$Cl:n._$Co?.[r],a=O(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),a===void 0?i=void 0:(i=new a(e),i._$AT(e,n,r)),r===void 0?n._$Cl=i:(n._$Co??=[])[r]=i),i!==void 0&&(t=G(e,i._$AS(e,t.values),i,r)),t}var le=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:n}=this._$AD,r=(e?.creationScope??E).importNode(t,!0);H.currentNode=r;let i=H.nextNode(),a=0,o=0,s=n[0];for(;s!==void 0;){if(a===s.index){let t;s.type===2?t=new K(i,i.nextSibling,this,e):s.type===1?t=new s.ctor(i,s.name,s.strings,this,e):s.type===6&&(t=new pe(i,this,e)),this._$AV.push(t),s=n[++o]}a!==s?.index&&(i=H.nextNode(),a++)}return H.currentNode=E,r}p(e){let t=0;for(let n of this._$AV)n!==void 0&&(n.strings===void 0?n._$AI(e[t]):(n._$AI(e,n,t),t+=n.strings.length-2)),t++}},K=class e{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,n,r){this.type=2,this._$AH=B,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=n,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=G(this,e,t),O(e)?e===B||e==null||e===``?(this._$AH!==B&&this._$AR(),this._$AH=B):e!==this._$AH&&e!==z&&this._(e):e._$litType$===void 0?e.nodeType===void 0?se(e)?this.k(e):this._(e):this.T(e):this.$(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==B&&O(this._$AH)?this._$AA.nextSibling.data=e:this.T(E.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:n}=e,r=typeof n==`number`?this._$AC(e):(n.el===void 0&&(n.el=W.createElement(U(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===r)this._$AH.p(t);else{let e=new le(r,this),n=e.u(this.options);e.p(t),this.T(n),this._$AH=e}}_$AC(e){let t=V.get(e.strings);return t===void 0&&V.set(e.strings,t=new W(e)),t}k(t){k(this._$AH)||(this._$AH=[],this._$AR());let n=this._$AH,r,i=0;for(let a of t)i===n.length?n.push(r=new e(this.O(D()),this.O(D()),this,this.options)):r=n[i],r._$AI(a),i++;i<n.length&&(this._$AR(r&&r._$AB.nextSibling,i),n.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let t=b(e).nextSibling;b(e).remove(),e=t}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},q=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,n,r,i){this.type=1,this._$AH=B,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,n.length>2||n[0]!==``||n[1]!==``?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=B}_$AI(e,t=this,n,r){let i=this.strings,a=!1;if(i===void 0)e=G(this,e,t,0),a=!O(e)||e!==this._$AH&&e!==z,a&&(this._$AH=e);else{let r=e,o,s;for(e=i[0],o=0;o<i.length-1;o++)s=G(this,r[n+o],t,o),s===z&&(s=this._$AH[o]),a||=!O(s)||s!==this._$AH[o],s===B?e=B:e!==B&&(e+=(s??``)+i[o+1]),this._$AH[o]=s}a&&!r&&this.j(e)}j(e){e===B?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??``)}},ue=class extends q{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===B?void 0:e}},de=class extends q{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==B)}},fe=class extends q{constructor(e,t,n,r,i){super(e,t,n,r,i),this.type=5}_$AI(e,t=this){if((e=G(this,e,t,0)??B)===z)return;let n=this._$AH,r=e===B&&n!==B||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,i=e!==B&&(n===B||r);r&&this.element.removeEventListener(this.name,this,n),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH==`function`?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},pe=class{constructor(e,t,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){G(this,e)}},me=y.litHtmlPolyfillSupport;me?.(W,K),(y.litHtmlVersions??=[]).push(`3.3.2`);var he=(e,t,n)=>{let r=n?.renderBefore??t,i=r._$litPart$;if(i===void 0){let e=n?.renderBefore??null;r._$litPart$=i=new K(t.insertBefore(D(),e),e,void 0,n??{})}return i._$AI(e),i},J=globalThis,Y=class extends v{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=he(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return z}};Y._$litElement$=!0,Y.finalized=!0,J.litElementHydrateSupport?.({LitElement:Y});var ge=J.litElementPolyfillSupport;ge?.({LitElement:Y}),(J.litElementVersions??=[]).push(`4.2.2`);var X=e=>(t,n)=>{n===void 0?customElements.define(e,t):n.addInitializer(()=>{customElements.define(e,t)})};function Z(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var Q=class extends Y{constructor(...e){super(...e),this.variant=`normal`,this.thin=!1,this.thick=!1,this.outlineOnly=!1,this.scaleOnHover=!1,this.rounded=!1,this.sharp=!1,this.dark=!1,this.dontPunch=!1,this.animation=`normal`,this.type=`button`,this.id=``,this.name=``,this.disabled=!1,this.form=``,this.formaction=``,this.formmethod=``,this.formnovalidate=!1,this.formtarget=``,this.title=``,this.ariaLabel=``,this.ariaDescribedby=``,this.ariaPressed=``,this.background=``,this.borderColor=``,this.textColor=``}static#e=this.properties={variant:{type:String},animation:{type:String},thin:{type:Boolean},thick:{type:Boolean},outlineOnly:{type:Boolean},rounded:{type:Boolean},sharp:{type:Boolean},scaleOnHover:{type:Boolean},dark:{type:Boolean},background:{type:String},textColor:{type:String},borderColor:{type:String},dontPunch:{type:Boolean},style:{type:String},type:{type:String},id:{type:String},name:{type:String},disabled:{type:Boolean},form:{type:String},formaction:{type:String},formmethod:{type:String},formnovalidate:{type:Boolean},formtarget:{type:String},title:{type:String},ariaLabel:{type:String,attribute:`aria-label`},ariaDescribedby:{type:String,attribute:`aria-describedby`},ariaPressed:{type:String,attribute:`aria-pressed`}};static#t=this.styles=s`
|
|
3
3
|
button {
|
|
4
4
|
padding: 8px 16px;
|
|
5
5
|
border: none;
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
transition: all 0.45s;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.animation-
|
|
108
|
+
.animation-very-slow {
|
|
109
109
|
transition: all 1s;
|
|
110
110
|
}
|
|
111
111
|
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
font-size: 12px;
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
|
-
`;render(){let e=(this.variant===`normal`||this.variant===`success`)&&this.dark?this.variant===`normal`?`white`:`#2cff72ff`:``,t=this.variant===`normal`&&this.
|
|
125
|
+
`;render(){let e=(this.variant===`normal`||this.variant===`success`)&&this.dark?this.variant===`normal`?`white`:`#2cff72ff`:``,t=this.variant===`normal`&&this.background!==``?this.background:null,n=this.borderColor||null,r=this.textColor||null;return R`<button
|
|
126
126
|
type="${this.type}"
|
|
127
127
|
?disabled="${this.disabled}"
|
|
128
128
|
id="${this.id||``}"
|
|
@@ -136,7 +136,33 @@
|
|
|
136
136
|
aria-label="${this.ariaLabel||``}"
|
|
137
137
|
aria-describedby="${this.ariaDescribedby||``}"
|
|
138
138
|
aria-pressed="${this.ariaPressed||``}"
|
|
139
|
-
class="${this.variant}${this.
|
|
140
|
-
style="${e?`color: ${e}; `:``}${t&&!this.outlineOnly?`background
|
|
139
|
+
class="${this.variant}${this.background||this.borderColor?` custom-color`:``}${this.dontPunch?` dont-punch`:``}${this.thin&&!this.thick?` thin`:this.thick?` thick`:``}${this.outlineOnly?` outline-only`:``}${this.scaleOnHover?` scale-hover`:``}${this.rounded&&!this.sharp?` rounded`:this.sharp?` sharp`:``} animation-${this.animation}"
|
|
140
|
+
style="${e?`color: ${e}; `:``}${t&&!this.outlineOnly?`background: ${t}; `:``}${t&&!n?`border: 1px solid color-mix(in hsl, ${t} 100%, white 10%); `:n?`border: 1px solid ${n}; `:``}${r?`color: ${r}; `:``}${this.style}">
|
|
141
141
|
<slot></slot>
|
|
142
|
-
</button>`}}
|
|
142
|
+
</button>`}};Q=Z([X(`n-button`)],Q);var $=class extends Y{constructor(...e){super(...e),this.position=`block`,this.dark=!1,this.copy=``,this.background=``,this.size=`small`,this.id=``,this.name=``,this.disabled=!1,this.ariaLabel=``,this.ariaDescribedby=``,this.ariaPressed=``}static#e=this.properties={dark:{type:Boolean},copy:{type:String},position:{type:String},background:{type:String},size:{type:String},id:{type:String},style:{type:String},name:{type:String},disabled:{type:Boolean},ariaLabel:{type:String,attribute:`aria-label`},ariaDescribedby:{type:String,attribute:`aria-describedby`},ariaPressed:{type:String,attribute:`aria-pressed`}};static#t=this.styles=s`
|
|
143
|
+
.copy-button {
|
|
144
|
+
display: block;
|
|
145
|
+
cursor: pointer;
|
|
146
|
+
user-select: none;
|
|
147
|
+
padding: 4px;
|
|
148
|
+
border-radius: 4px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.copy-button:active {
|
|
152
|
+
scale: 0.90;
|
|
153
|
+
}
|
|
154
|
+
`;render(){let e=`16px`,t=``;switch(this.size===`medium`?e=`24px`:this.size===`large`&&(e=`32px`),this.position){case`top right`:t=`position: absolute; top: 0; right: 0;`;break;case`bottom right`:t=`position: absolute; bottom: 0; right: 0;`;break;case`top left`:t=`position: absolute; top: 0; left: 0;`;break;case`bottom left`:t=`position: absolute; bottom: 0; left: 0;`;break;case`top`:t=`position: absolute; top: 0; right: 50%; transform: translateX(-50%);`;break;case`bottom`:t=`position: absolute; bottom: 0; right: 50%; transform: translateX(-50%);`;break;case`left`:t=`position: absolute; left: 0; top: 50%; transform: translateY(-50%);`;break;case`right`:t=`position: absolute; right: 0; top: 50%; transform: translateY(-50%);`;break;case`block`:default:t=`position: unset;`;break}return R`<div
|
|
155
|
+
?disabled="${this.disabled}"
|
|
156
|
+
id="${this.id||``}"
|
|
157
|
+
@click="${this.handleCopy}"
|
|
158
|
+
name="${this.name||``}"
|
|
159
|
+
copy="${this.copy||``}"
|
|
160
|
+
aria-label="${this.ariaLabel||``}"
|
|
161
|
+
aria-describedby="${this.ariaDescribedby||``}"
|
|
162
|
+
aria-pressed="${this.ariaPressed||``}"
|
|
163
|
+
class="copy-button"
|
|
164
|
+
style="${t}${` width: ${e}; height: ${e};`}${this.background===``?``:` background: ${this.background};`}${this.style?` ${this.style}`:``}">
|
|
165
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="${this.dark?`white`:`black`}">
|
|
166
|
+
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/>
|
|
167
|
+
</svg>
|
|
168
|
+
</div>`}handleCopy(){navigator.clipboard.writeText(this.copy)}};$=Z([X(`n-copy`)],$),Object.defineProperty(e,`NButton`,{enumerable:!0,get:function(){return Q}}),Object.defineProperty(e,`NCopy`,{enumerable:!0,get:function(){return $}})});
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@trenoxxious/n-components",
|
|
3
3
|
"description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.13",
|
|
6
6
|
"repository": "github:Trenoxxious/n-components",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"web-components",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"exports": {
|
|
16
16
|
".": "./dist/n-components.js"
|
|
17
17
|
},
|
|
18
|
+
"readme": "../README.md",
|
|
18
19
|
"scripts": {
|
|
19
20
|
"dev": "vite",
|
|
20
21
|
"build": "tsc && vite build",
|
package/README.md
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
# n-components
|
|
2
|
-
Simple web components for use with *static* vanilla HTML, JS and CSS websites.
|
|
3
|
-
|
|
4
|
-
To use, import with `<script src="https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"></script>` in your HTML `<head>`.
|
|
5
|
-
|
|
6
|
-
## Buttons
|
|
7
|
-
**An n-component button element is called using `<n-button></n-button>` in any HTML document/context.**
|
|
8
|
-
|
|
9
|
-
There are several options for n-button components, including:
|
|
10
|
-
| Variable | Description | Default | Accepts |
|
|
11
|
-
| -------- | -------- | -------- | -------- |
|
|
12
|
-
| ***variant*** | Changes the main color theme of the button. | normal | normal, info, success, warning, alert |
|
|
13
|
-
| ***dontPunch*** | Does not scale down when clicked if this is set to true. | false | true, false |
|
|
14
|
-
| ***scaleOnHover*** | Will scale when hovered if this is set to true. | false | true, false |
|
|
15
|
-
| ***outlineOnly*** | Will only show the outline of the button if this is set to true. | false | true, false |
|
|
16
|
-
| ***animation*** | Sets the animation speed of most button animations. | normal | fast, normal, slow, very-slow |
|
|
17
|
-
| ***thick*** | Sets the padding high on the button. | false | true, false |
|
|
18
|
-
| ***thin*** | Sets the padding low on the button. | false | true, false |
|
|
19
|
-
| ***dark*** | Sets the button text to white. | false | true, false |
|
|
20
|
-
| ***background*** | Sets the button's background. | null | Any CSS-valid background |
|
|
21
|
-
| ***borderColor*** | Sets the button's border color. | null | Any CSS-valid color string |
|
|
22
|
-
| ***textColor*** | Sets the button's text color. | null | Any CSS-valid color string |
|
|
23
|
-
| ***rounded*** | Rounds the button corners a little more. | false | true, false |
|
|
24
|
-
| ***sharp*** | Sharpens the button corners. | false | true, false |
|
package/dist/vite.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|