@diniz/webcomponents 1.1.5 → 1.1.7
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/README.md +563 -750
- package/dist/README.md +563 -750
- package/dist/button-demo-BcfxxPSq.js +227 -0
- package/dist/card-demo-Cxp-wRGW.js +230 -0
- package/dist/date-picker-demo-B8y3zapN.js +143 -0
- package/dist/form-demo-page-F1iLCgfh.js +351 -0
- package/dist/home-page-XUM8cHP7.js +468 -0
- package/dist/index-DiYekJaQ.js +2424 -0
- package/dist/layout-demo-CJsZ6DI5.js +289 -0
- package/dist/modal-demo-page-YN2KgJ31.js +195 -0
- package/dist/stepper-demo-page-BkcpKk_F.js +312 -0
- package/dist/table-demo-x2ZD8cFh.js +137 -0
- package/dist/tabs-demo-BQBtZzw9.js +76 -0
- package/dist/toast-demo-page-DLVacHXA.js +260 -0
- package/dist/webcomponents.es.js +31 -1883
- package/dist/webcomponents.umd.js +2537 -113
- package/package.json +1 -1
|
@@ -0,0 +1,468 @@
|
|
|
1
|
+
import { B as n } from "./index-DiYekJaQ.js";
|
|
2
|
+
const e = `<section class="hero">
|
|
3
|
+
<div class="hero-content">
|
|
4
|
+
<h1 class="hero-title">@diniz/webcomponents</h1>
|
|
5
|
+
<p class="hero-subtitle">
|
|
6
|
+
A lightweight, framework-agnostic web components library built with vanilla TypeScript.
|
|
7
|
+
Create modern, reactive UIs using native Web Components API with zero dependencies.
|
|
8
|
+
</p>
|
|
9
|
+
<div class="hero-actions">
|
|
10
|
+
<ui-button variant="primary" size="lg">Explore Components</ui-button>
|
|
11
|
+
<ui-button variant="ghost" size="lg">View on GitHub</ui-button>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="hero-visual">
|
|
15
|
+
<div class="feature-icons">
|
|
16
|
+
<div class="icon-item">✨</div>
|
|
17
|
+
<div class="icon-item">⚡</div>
|
|
18
|
+
<div class="icon-item">🎨</div>
|
|
19
|
+
<div class="icon-item">📦</div>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</section>
|
|
23
|
+
|
|
24
|
+
<section class="features">
|
|
25
|
+
<h2>Why Use This Library?</h2>
|
|
26
|
+
<div class="features-grid">
|
|
27
|
+
<div class="feature-card">
|
|
28
|
+
<div class="feature-icon">✨</div>
|
|
29
|
+
<h3>Native Web Components</h3>
|
|
30
|
+
<p>Built on standard Custom Elements API. Works with any framework or none at all.</p>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="feature-card">
|
|
33
|
+
<div class="feature-icon">⚡</div>
|
|
34
|
+
<h3>Reactive Signals</h3>
|
|
35
|
+
<p>Built-in signal-based reactivity system similar to Solid.js for smooth updates.</p>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="feature-card">
|
|
38
|
+
<div class="feature-icon">🎨</div>
|
|
39
|
+
<h3>Theme Support</h3>
|
|
40
|
+
<p>CSS custom properties make theming and customization effortless.</p>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="feature-card">
|
|
43
|
+
<div class="feature-icon">📦</div>
|
|
44
|
+
<h3>Zero Dependencies</h3>
|
|
45
|
+
<p>No framework required. Lightweight and fast with nothing to bloat your bundle.</p>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="feature-card">
|
|
48
|
+
<div class="feature-icon">🔒</div>
|
|
49
|
+
<h3>TypeScript Support</h3>
|
|
50
|
+
<p>Full type safety and IntelliSense support for better development experience.</p>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="feature-card">
|
|
53
|
+
<div class="feature-icon">♿</div>
|
|
54
|
+
<h3>Accessible</h3>
|
|
55
|
+
<p>Built with ARIA attributes and keyboard navigation from the ground up.</p>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</section>
|
|
59
|
+
|
|
60
|
+
<section class="components">
|
|
61
|
+
<h2>Available Components</h2>
|
|
62
|
+
<div class="components-grid">
|
|
63
|
+
<div class="component-item">
|
|
64
|
+
<span class="component-name">ui-button</span>
|
|
65
|
+
<span class="component-desc">Flexible button with variants and sizes</span>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="component-item">
|
|
68
|
+
<span class="component-name">ui-input</span>
|
|
69
|
+
<span class="component-desc">Text input with validation</span>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="component-item">
|
|
72
|
+
<span class="component-name">ui-select</span>
|
|
73
|
+
<span class="component-desc">Dropdown select component</span>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="component-item">
|
|
76
|
+
<span class="component-name">ui-checkbox</span>
|
|
77
|
+
<span class="component-desc">Custom checkbox component</span>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="component-item">
|
|
80
|
+
<span class="component-name">ui-date-picker</span>
|
|
81
|
+
<span class="component-desc">Date selection with format options</span>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="component-item">
|
|
84
|
+
<span class="component-name">ui-table</span>
|
|
85
|
+
<span class="component-desc">Data table with sorting and actions</span>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="component-item">
|
|
88
|
+
<span class="component-name">ui-modal</span>
|
|
89
|
+
<span class="component-desc">Dialog modal component</span>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="component-item">
|
|
92
|
+
<span class="component-name">ui-tabs</span>
|
|
93
|
+
<span class="component-desc">Tab navigation component</span>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="component-item">
|
|
96
|
+
<span class="component-name">ui-card</span>
|
|
97
|
+
<span class="component-desc">Card container component</span>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="component-item">
|
|
100
|
+
<span class="component-name">ui-toast</span>
|
|
101
|
+
<span class="component-desc">Toast notification system</span>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="component-item">
|
|
104
|
+
<span class="component-name">ui-stepper</span>
|
|
105
|
+
<span class="component-desc">Multi-step progress indicator</span>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="component-item">
|
|
108
|
+
<span class="component-name">ui-upload</span>
|
|
109
|
+
<span class="component-desc">File upload with drag-drop</span>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="component-item">
|
|
112
|
+
<span class="component-name">ui-layout</span>
|
|
113
|
+
<span class="component-desc">Flexible page layout system</span>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</section>
|
|
117
|
+
|
|
118
|
+
<section class="quick-start">
|
|
119
|
+
<h2>Quick Start</h2>
|
|
120
|
+
<div class="code-blocks">
|
|
121
|
+
<div class="code-block">
|
|
122
|
+
<h3>Installation</h3>
|
|
123
|
+
<pre><code>npm install @diniz/webcomponents</code></pre>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="code-block">
|
|
126
|
+
<h3>Basic Usage</h3>
|
|
127
|
+
<pre><code><ui-button variant="primary">Click Me</ui-button>
|
|
128
|
+
<ui-input placeholder="Enter text"></ui-input>
|
|
129
|
+
<ui-date-picker format="MM/DD/YYYY"></ui-date-picker></code></pre>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="code-block">
|
|
132
|
+
<h3>With Events</h3>
|
|
133
|
+
<pre><code>const picker = document.querySelector('ui-date-picker');
|
|
134
|
+
picker?.addEventListener('date-change', (e) => {
|
|
135
|
+
console.log('Date:', e.detail.value);
|
|
136
|
+
});</code></pre>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</section>
|
|
140
|
+
|
|
141
|
+
<section class="cta">
|
|
142
|
+
<h2>Ready to Build Amazing UIs?</h2>
|
|
143
|
+
<p>Explore the interactive component library and see what you can create.</p>
|
|
144
|
+
<ui-button variant="primary" size="lg" icon="arrow-right">Start Exploring</ui-button>
|
|
145
|
+
</section>
|
|
146
|
+
`, o = `
|
|
147
|
+
:host {
|
|
148
|
+
display: block;
|
|
149
|
+
color: var(--color-ink);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
h1, h2, h3 {
|
|
153
|
+
margin: 0;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
h2 {
|
|
157
|
+
font-size: 2rem;
|
|
158
|
+
font-weight: 700;
|
|
159
|
+
margin-bottom: 2rem;
|
|
160
|
+
position: relative;
|
|
161
|
+
display: inline-block;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
h2::after {
|
|
165
|
+
content: '';
|
|
166
|
+
position: absolute;
|
|
167
|
+
bottom: -8px;
|
|
168
|
+
left: 0;
|
|
169
|
+
width: 60px;
|
|
170
|
+
height: 4px;
|
|
171
|
+
background: var(--color-primary);
|
|
172
|
+
border-radius: 2px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
p {
|
|
176
|
+
line-height: 1.6;
|
|
177
|
+
color: rgba(15, 23, 42, 0.75);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Hero Section */
|
|
181
|
+
.hero {
|
|
182
|
+
display: grid;
|
|
183
|
+
grid-template-columns: 1fr 1fr;
|
|
184
|
+
gap: 4rem;
|
|
185
|
+
align-items: center;
|
|
186
|
+
margin-bottom: 6rem;
|
|
187
|
+
padding: 3rem 0;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.hero-content {
|
|
191
|
+
display: flex;
|
|
192
|
+
flex-direction: column;
|
|
193
|
+
gap: 1.5rem;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.hero-title {
|
|
197
|
+
font-size: 3.5rem;
|
|
198
|
+
font-weight: 800;
|
|
199
|
+
line-height: 1.1;
|
|
200
|
+
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-ink) 100%);
|
|
201
|
+
-webkit-background-clip: text;
|
|
202
|
+
-webkit-text-fill-color: transparent;
|
|
203
|
+
background-clip: text;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.hero-subtitle {
|
|
207
|
+
font-size: 1.25rem;
|
|
208
|
+
line-height: 1.7;
|
|
209
|
+
color: rgba(15, 23, 42, 0.7);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.hero-actions {
|
|
213
|
+
display: flex;
|
|
214
|
+
gap: 1rem;
|
|
215
|
+
margin-top: 0.5rem;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.hero-visual {
|
|
219
|
+
display: flex;
|
|
220
|
+
align-items: center;
|
|
221
|
+
justify-content: center;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.feature-icons {
|
|
225
|
+
display: grid;
|
|
226
|
+
grid-template-columns: repeat(2, 1fr);
|
|
227
|
+
gap: 2rem;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.icon-item {
|
|
231
|
+
font-size: 4rem;
|
|
232
|
+
animation: float 3s ease-in-out infinite;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.icon-item:nth-child(2) { animation-delay: 0.3s; }
|
|
236
|
+
.icon-item:nth-child(3) { animation-delay: 0.6s; }
|
|
237
|
+
.icon-item:nth-child(4) { animation-delay: 0.9s; }
|
|
238
|
+
|
|
239
|
+
@keyframes float {
|
|
240
|
+
0%, 100% { transform: translateY(0px); }
|
|
241
|
+
50% { transform: translateY(-10px); }
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* Features Section */
|
|
245
|
+
.features {
|
|
246
|
+
margin-bottom: 6rem;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.features-grid {
|
|
250
|
+
display: grid;
|
|
251
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
252
|
+
gap: 2rem;
|
|
253
|
+
margin-top: 2rem;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.feature-card {
|
|
257
|
+
padding: 2rem;
|
|
258
|
+
background: var(--color-surface);
|
|
259
|
+
border: 1px solid var(--color-border);
|
|
260
|
+
border-radius: 16px;
|
|
261
|
+
transition: all 0.3s ease;
|
|
262
|
+
display: flex;
|
|
263
|
+
flex-direction: column;
|
|
264
|
+
gap: 1rem;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.feature-card:hover {
|
|
268
|
+
transform: translateY(-4px);
|
|
269
|
+
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
|
|
270
|
+
border-color: var(--color-primary);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.feature-icon {
|
|
274
|
+
font-size: 2.5rem;
|
|
275
|
+
line-height: 1;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.feature-card h3 {
|
|
279
|
+
font-size: 1.2rem;
|
|
280
|
+
font-weight: 600;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.feature-card p {
|
|
284
|
+
font-size: 0.95rem;
|
|
285
|
+
margin: 0;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* Components Section */
|
|
289
|
+
.components {
|
|
290
|
+
margin-bottom: 6rem;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.components-grid {
|
|
294
|
+
display: grid;
|
|
295
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
296
|
+
gap: 1rem;
|
|
297
|
+
margin-top: 2rem;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.component-item {
|
|
301
|
+
padding: 1.5rem;
|
|
302
|
+
background: var(--color-surface);
|
|
303
|
+
border: 1px solid var(--color-border);
|
|
304
|
+
border-radius: 12px;
|
|
305
|
+
transition: all 0.2s ease;
|
|
306
|
+
cursor: pointer;
|
|
307
|
+
display: flex;
|
|
308
|
+
flex-direction: column;
|
|
309
|
+
gap: 0.5rem;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.component-item:hover {
|
|
313
|
+
border-color: var(--color-primary);
|
|
314
|
+
background: linear-gradient(135deg, rgba(36, 236, 113, 0.05), transparent);
|
|
315
|
+
transform: translateX(4px);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.component-name {
|
|
319
|
+
font-weight: 600;
|
|
320
|
+
color: var(--color-primary);
|
|
321
|
+
font-family: "Cascadia Mono", "Fira Code", monospace;
|
|
322
|
+
font-size: 0.9rem;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.component-desc {
|
|
326
|
+
font-size: 0.85rem;
|
|
327
|
+
color: rgba(15, 23, 42, 0.6);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
/* Quick Start Section */
|
|
331
|
+
.quick-start {
|
|
332
|
+
margin-bottom: 6rem;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.code-blocks {
|
|
336
|
+
display: grid;
|
|
337
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
338
|
+
gap: 2rem;
|
|
339
|
+
margin-top: 2rem;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.code-block {
|
|
343
|
+
background: #0f172a;
|
|
344
|
+
padding: 2rem;
|
|
345
|
+
border-radius: 12px;
|
|
346
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.code-block h3 {
|
|
350
|
+
color: #f8fafc;
|
|
351
|
+
font-size: 1.1rem;
|
|
352
|
+
margin-bottom: 1rem;
|
|
353
|
+
font-weight: 600;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.code-block pre {
|
|
357
|
+
margin: 0;
|
|
358
|
+
overflow-x: auto;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.code-block code {
|
|
362
|
+
font-family: "Cascadia Mono", "Fira Code", monospace;
|
|
363
|
+
font-size: 0.9rem;
|
|
364
|
+
color: #e0e7ff;
|
|
365
|
+
line-height: 1.5;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* CTA Section */
|
|
369
|
+
.cta {
|
|
370
|
+
text-align: center;
|
|
371
|
+
padding: 4rem 2rem;
|
|
372
|
+
background: linear-gradient(135deg, rgba(36, 236, 113, 0.1) 0%, rgba(52, 168, 235, 0.05) 100%);
|
|
373
|
+
border-radius: 16px;
|
|
374
|
+
border: 1px solid var(--color-border);
|
|
375
|
+
margin-bottom: 2rem;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.cta h2 {
|
|
379
|
+
margin-bottom: 1rem;
|
|
380
|
+
font-size: 2rem;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.cta h2::after {
|
|
384
|
+
display: none;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.cta p {
|
|
388
|
+
font-size: 1.1rem;
|
|
389
|
+
margin-bottom: 2rem;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
/* Responsive */
|
|
393
|
+
@media (max-width: 768px) {
|
|
394
|
+
.hero {
|
|
395
|
+
grid-template-columns: 1fr;
|
|
396
|
+
gap: 2rem;
|
|
397
|
+
margin-bottom: 4rem;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.hero-title {
|
|
401
|
+
font-size: 2.5rem;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.hero-subtitle {
|
|
405
|
+
font-size: 1rem;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.hero-actions {
|
|
409
|
+
flex-wrap: wrap;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.feature-icons {
|
|
413
|
+
grid-template-columns: 1fr;
|
|
414
|
+
gap: 1rem;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.icon-item {
|
|
418
|
+
font-size: 3rem;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
h2 {
|
|
422
|
+
font-size: 1.5rem;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.features-grid,
|
|
426
|
+
.components-grid {
|
|
427
|
+
grid-template-columns: 1fr;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.code-blocks {
|
|
431
|
+
grid-template-columns: 1fr;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.cta {
|
|
435
|
+
padding: 2rem 1.5rem;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.cta h2 {
|
|
439
|
+
font-size: 1.5rem;
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
`;
|
|
443
|
+
class a extends n {
|
|
444
|
+
connectedCallback() {
|
|
445
|
+
super.connectedCallback(), this.attachEventListeners();
|
|
446
|
+
}
|
|
447
|
+
attachEventListeners() {
|
|
448
|
+
if (!this.shadowRoot) return;
|
|
449
|
+
const t = this.shadowRoot.querySelectorAll("ui-button");
|
|
450
|
+
t[0] && t[0].addEventListener("click", () => {
|
|
451
|
+
window.location.href = "/button";
|
|
452
|
+
}), t[1] && t[1].addEventListener("click", () => {
|
|
453
|
+
window.open("https://github.com/rodiniz/webcomponents", "_blank");
|
|
454
|
+
}), t[2] && t[2].addEventListener("click", () => {
|
|
455
|
+
window.location.href = "/button";
|
|
456
|
+
});
|
|
457
|
+
}
|
|
458
|
+
render() {
|
|
459
|
+
this.shadowRoot.innerHTML = `
|
|
460
|
+
<style>${o}</style>
|
|
461
|
+
${e}
|
|
462
|
+
`;
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
customElements.define("home-page", a);
|
|
466
|
+
export {
|
|
467
|
+
a as HomePage
|
|
468
|
+
};
|