edu-webcomponents 1.22.0 → 1.23.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/CHANGELOG.md +8 -1
- package/demo/index.html +291 -27
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,9 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [v1.23.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.22.0...v1.23.0)
|
|
8
|
+
|
|
9
|
+
- docs: improve demo [`ce6a822`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/ce6a82267022d9d5f9ab947b8fa8a15348d2cd16)
|
|
10
|
+
|
|
7
11
|
#### [v1.22.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.21.0...v1.22.0)
|
|
8
12
|
|
|
9
|
-
|
|
13
|
+
> 7 January 2026
|
|
14
|
+
|
|
15
|
+
- feat: add edu-skeleton-text component [`8192e1c`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/8192e1c2687445369ab7c6b41eb28fcdb615c726)
|
|
16
|
+
- chore: release v1.22.0 [`347cf37`](https://github.com/eduardocruzpalacios/edu-webcomponents/commit/347cf37914aa1e42a90b9c1eca4963e528bdb005)
|
|
10
17
|
|
|
11
18
|
#### [v1.21.0](https://github.com/eduardocruzpalacios/edu-webcomponents/compare/v1.20.0...v1.21.0)
|
|
12
19
|
|
package/demo/index.html
CHANGED
|
@@ -1,29 +1,293 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!DOCTYPE html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Edu Web Components - Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
body {
|
|
13
|
+
background: #fafafa;
|
|
14
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
|
|
15
|
+
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
|
|
16
|
+
'Helvetica Neue', sans-serif;
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 2rem;
|
|
19
|
+
line-height: 1.6;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
#demo {
|
|
23
|
+
max-width: 1200px;
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
h1 {
|
|
28
|
+
color: #333;
|
|
29
|
+
margin-bottom: 0.5rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.subtitle {
|
|
33
|
+
color: #666;
|
|
34
|
+
margin-bottom: 2rem;
|
|
35
|
+
font-size: 1.1rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.section {
|
|
39
|
+
background: white;
|
|
40
|
+
border-radius: 8px;
|
|
41
|
+
padding: 2rem;
|
|
42
|
+
margin-bottom: 2rem;
|
|
43
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.section h2 {
|
|
47
|
+
color: #333;
|
|
48
|
+
margin-top: 0;
|
|
49
|
+
margin-bottom: 1rem;
|
|
50
|
+
font-size: 1.5rem;
|
|
51
|
+
border-bottom: 2px solid #e0e0e0;
|
|
52
|
+
padding-bottom: 0.5rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.section p {
|
|
56
|
+
color: #666;
|
|
57
|
+
margin-bottom: 1.5rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.demo-item {
|
|
61
|
+
margin-top: 1.5rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.demo-label {
|
|
65
|
+
font-weight: 600;
|
|
66
|
+
color: #555;
|
|
67
|
+
margin-bottom: 0.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.button-group {
|
|
71
|
+
display: flex;
|
|
72
|
+
gap: 1rem;
|
|
73
|
+
flex-wrap: wrap;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.progress-group {
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
gap: 1rem;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.skeleton-group {
|
|
83
|
+
display: flex;
|
|
84
|
+
flex-direction: column;
|
|
85
|
+
gap: 1.5rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.tooltip-group {
|
|
89
|
+
display: flex;
|
|
90
|
+
gap: 2rem;
|
|
91
|
+
flex-wrap: wrap;
|
|
92
|
+
align-items: flex-start;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
code {
|
|
96
|
+
background: #f4f4f4;
|
|
97
|
+
padding: 0.2rem 0.4rem;
|
|
98
|
+
border-radius: 3px;
|
|
99
|
+
font-size: 0.9em;
|
|
100
|
+
}
|
|
101
|
+
</style>
|
|
102
|
+
</head>
|
|
103
|
+
<body>
|
|
104
|
+
<div id="demo"></div>
|
|
105
|
+
|
|
106
|
+
<script type="module">
|
|
107
|
+
import { html, render } from 'lit';
|
|
108
|
+
import '../index.js';
|
|
109
|
+
|
|
110
|
+
render(
|
|
111
|
+
html`
|
|
112
|
+
<h1>Edu Web Components Library</h1>
|
|
113
|
+
<p class="subtitle">
|
|
114
|
+
A collection of reusable web components built with Lit
|
|
115
|
+
</p>
|
|
116
|
+
|
|
117
|
+
<!-- Button Component -->
|
|
118
|
+
<section class="section">
|
|
119
|
+
<h2>Button</h2>
|
|
120
|
+
<p>A customizable button component with different states.</p>
|
|
121
|
+
|
|
122
|
+
<div class="demo-item">
|
|
123
|
+
<div class="demo-label">Default Button</div>
|
|
124
|
+
<div class="button-group">
|
|
125
|
+
<edu-button .text=${'Click Me'}></edu-button>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="demo-item">
|
|
130
|
+
<div class="demo-label">Disabled Button</div>
|
|
131
|
+
<div class="button-group">
|
|
132
|
+
<edu-button .text=${'Disabled'} .disabled=${true}></edu-button>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
</section>
|
|
136
|
+
|
|
137
|
+
<!-- Divider Component -->
|
|
138
|
+
<section class="section">
|
|
139
|
+
<h2>Divider</h2>
|
|
140
|
+
<p>A horizontal divider to separate content sections.</p>
|
|
141
|
+
|
|
142
|
+
<div class="demo-item">
|
|
143
|
+
<div class="demo-label">Simple Divider</div>
|
|
144
|
+
<edu-divider></edu-divider>
|
|
145
|
+
</div>
|
|
146
|
+
|
|
147
|
+
<div class="demo-item">
|
|
148
|
+
<div class="demo-label">Divider with Label</div>
|
|
149
|
+
<edu-divider .label=${'OR'}></edu-divider>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="demo-item">
|
|
153
|
+
<div class="demo-label">Divider with Text</div>
|
|
154
|
+
<edu-divider .label=${'Section Break'}></edu-divider>
|
|
155
|
+
</div>
|
|
156
|
+
</section>
|
|
157
|
+
|
|
158
|
+
<!-- Loading Spinner Component -->
|
|
159
|
+
<section class="section">
|
|
160
|
+
<h2>Loading Spinner</h2>
|
|
161
|
+
<p>An animated loading spinner for indicating loading states.</p>
|
|
162
|
+
|
|
163
|
+
<div class="demo-item">
|
|
164
|
+
<div class="demo-label">Default Spinner</div>
|
|
165
|
+
<edu-loading-spinner></edu-loading-spinner>
|
|
166
|
+
</div>
|
|
167
|
+
</section>
|
|
168
|
+
|
|
169
|
+
<!-- Progress Bar Component -->
|
|
170
|
+
<section class="section">
|
|
171
|
+
<h2>Progress Bar</h2>
|
|
172
|
+
<p>A progress bar to visualize completion or loading progress.</p>
|
|
173
|
+
|
|
174
|
+
<div class="demo-item">
|
|
175
|
+
<div class="demo-label">Progress at 25%</div>
|
|
176
|
+
<edu-progress-bar
|
|
177
|
+
.value=${25}
|
|
178
|
+
.max=${100}
|
|
179
|
+
.showLabel=${true}
|
|
180
|
+
></edu-progress-bar>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<div class="demo-item">
|
|
184
|
+
<div class="demo-label">Progress at 50%</div>
|
|
185
|
+
<edu-progress-bar
|
|
186
|
+
.value=${50}
|
|
187
|
+
.max=${100}
|
|
188
|
+
.showLabel=${true}
|
|
189
|
+
></edu-progress-bar>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<div class="demo-item">
|
|
193
|
+
<div class="demo-label">Progress at 75%</div>
|
|
194
|
+
<edu-progress-bar
|
|
195
|
+
.value=${75}
|
|
196
|
+
.max=${100}
|
|
197
|
+
.showLabel=${true}
|
|
198
|
+
></edu-progress-bar>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div class="demo-item">
|
|
202
|
+
<div class="demo-label">Complete (100%)</div>
|
|
203
|
+
<edu-progress-bar
|
|
204
|
+
.value=${100}
|
|
205
|
+
.max=${100}
|
|
206
|
+
.showLabel=${true}
|
|
207
|
+
></edu-progress-bar>
|
|
208
|
+
</div>
|
|
209
|
+
</section>
|
|
210
|
+
|
|
211
|
+
<!-- Skeleton Text Component -->
|
|
212
|
+
<section class="section">
|
|
213
|
+
<h2>Skeleton Text</h2>
|
|
214
|
+
<p>Skeleton loaders to show content placeholders during loading.</p>
|
|
215
|
+
|
|
216
|
+
<div class="demo-item">
|
|
217
|
+
<div class="demo-label">Single Line</div>
|
|
218
|
+
<edu-skeleton-text
|
|
219
|
+
.width=${'100%'}
|
|
220
|
+
.lines=${1}
|
|
221
|
+
></edu-skeleton-text>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<div class="demo-item">
|
|
225
|
+
<div class="demo-label">Three Lines</div>
|
|
226
|
+
<edu-skeleton-text
|
|
227
|
+
.width=${'100%'}
|
|
228
|
+
.lines=${3}
|
|
229
|
+
></edu-skeleton-text>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div class="demo-item">
|
|
233
|
+
<div class="demo-label">Short Width</div>
|
|
234
|
+
<edu-skeleton-text
|
|
235
|
+
.width=${'50%'}
|
|
236
|
+
.lines=${2}
|
|
237
|
+
></edu-skeleton-text>
|
|
238
|
+
</div>
|
|
239
|
+
</section>
|
|
240
|
+
|
|
241
|
+
<!-- Tooltip Component -->
|
|
242
|
+
<section class="section">
|
|
243
|
+
<h2>Tooltip</h2>
|
|
244
|
+
<p>Hover over elements to see tooltips in different positions.</p>
|
|
245
|
+
|
|
246
|
+
<div class="tooltip-group">
|
|
247
|
+
<div class="demo-item">
|
|
248
|
+
<div class="demo-label">Bottom (default)</div>
|
|
249
|
+
<edu-tooltip
|
|
250
|
+
.text=${'This is a bottom tooltip'}
|
|
251
|
+
.position=${'bottom'}
|
|
252
|
+
>
|
|
253
|
+
<edu-button .text=${'Hover me'}></edu-button>
|
|
254
|
+
</edu-tooltip>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<div class="demo-item">
|
|
258
|
+
<div class="demo-label">Top</div>
|
|
259
|
+
<edu-tooltip
|
|
260
|
+
.text=${'This is a top tooltip'}
|
|
261
|
+
.position=${'top'}
|
|
262
|
+
>
|
|
263
|
+
<edu-button .text=${'Hover me'}></edu-button>
|
|
264
|
+
</edu-tooltip>
|
|
265
|
+
</div>
|
|
266
|
+
|
|
267
|
+
<div class="demo-item">
|
|
268
|
+
<div class="demo-label">Left</div>
|
|
269
|
+
<edu-tooltip
|
|
270
|
+
.text=${'This is a left tooltip'}
|
|
271
|
+
.position=${'left'}
|
|
272
|
+
>
|
|
273
|
+
<edu-button .text=${'Hover me'}></edu-button>
|
|
274
|
+
</edu-tooltip>
|
|
275
|
+
</div>
|
|
276
|
+
|
|
277
|
+
<div class="demo-item">
|
|
278
|
+
<div class="demo-label">Right</div>
|
|
279
|
+
<edu-tooltip
|
|
280
|
+
.text=${'This is a right tooltip'}
|
|
281
|
+
.position=${'right'}
|
|
282
|
+
>
|
|
283
|
+
<edu-button .text=${'Hover me'}></edu-button>
|
|
284
|
+
</edu-tooltip>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
</section>
|
|
288
|
+
`,
|
|
289
|
+
document.querySelector('#demo')
|
|
290
|
+
);
|
|
291
|
+
</script>
|
|
292
|
+
</body>
|
|
29
293
|
</html>
|