lightview 2.3.7 → 2.4.4
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/.gemini/CODE_ANALYSIS_AND_IMPROVEMENT_PLAN.md +56 -0
- package/AI-GUIDANCE.md +259 -0
- package/README.md +35 -0
- package/components/data-display/diff.js +36 -4
- package/docs/api/hypermedia.html +75 -5
- package/docs/api/index.html +3 -3
- package/docs/api/nav.html +0 -16
- package/docs/articles/html-vs-json-partials.md +102 -0
- package/docs/articles/lightview-vs-htmx.md +610 -0
- package/docs/benchmarks/tagged-fragment.js +36 -0
- package/docs/cdom.html +6 -5
- package/docs/components/chart.html +157 -210
- package/docs/components/component-nav.html +1 -1
- package/docs/components/diff.html +33 -21
- package/docs/components/gallery.html +107 -4
- package/docs/components/index.css +18 -3
- package/docs/components/index.html +20 -9
- package/docs/dom-benchmark.html +644 -0
- package/docs/getting-started/index.html +2 -2
- package/docs/hypermedia/index.html +391 -0
- package/docs/hypermedia/nav.html +17 -0
- package/docs/index.html +128 -18
- package/index.html +59 -10
- package/lightview-all.js +223 -67
- package/lightview-cdom.js +1 -2
- package/lightview-x.js +144 -13
- package/lightview.js +85 -277
- package/package.json +2 -2
- package/src/lightview-cdom.js +1 -5
- package/src/lightview-x.js +158 -27
- package/src/lightview.js +94 -60
- package/1769196538097-package.json +0 -43
- package/build_tmp/lightview-router.js +0 -185
- package/build_tmp/lightview-x.js +0 -1608
- package/build_tmp/lightview.js +0 -932
- package/docs/articles/calculator-no-javascript-hackernoon.md +0 -283
- package/docs/articles/calculator-no-javascript.md +0 -290
- package/docs/articles/part1-reference.md +0 -236
- package/lightview.js.bak +0 -1
- package/test-xpath.html +0 -63
- package/test_error.txt +0 -0
- package/test_output.txt +0 -0
- package/test_output_full.txt +0 -0
|
@@ -93,6 +93,8 @@
|
|
|
93
93
|
<button id="tab-btn-object" role="tab" class="syntax-tab"
|
|
94
94
|
onclick="switchSyntaxTab('object')">Object
|
|
95
95
|
DOM</button>
|
|
96
|
+
<button id="tab-btn-html" role="tab" class="syntax-tab"
|
|
97
|
+
onclick="switchSyntaxTab('html')">HTML</button>
|
|
96
98
|
</div>
|
|
97
99
|
|
|
98
100
|
<!-- Tagged Syntax -->
|
|
@@ -108,7 +110,7 @@
|
|
|
108
110
|
</script><code contenteditable="true">const { default: Diff } = await import('/components/data-display/diff.js');
|
|
109
111
|
const { tags, $ } = Lightview;
|
|
110
112
|
|
|
111
|
-
const diff = Diff({
|
|
113
|
+
const diff = Diff({ style: 'max-width: 500px; min-height: 300px;' },
|
|
112
114
|
Diff.Item1({ src: 'https://picsum.photos/600/400?grayscale', alt: 'Before (Grayscale)' }),
|
|
113
115
|
Diff.Item2({ src: 'https://picsum.photos/600/400', alt: 'After (Color)' }),
|
|
114
116
|
Diff.Resizer({})
|
|
@@ -124,14 +126,14 @@ $('#example').content(diff);</code></pre>
|
|
|
124
126
|
at: document.currentScript.parentElement,
|
|
125
127
|
scripts: ['/lightview.js', '/lightview-x.js'],
|
|
126
128
|
type: 'module',
|
|
127
|
-
minHeight:
|
|
129
|
+
minHeight: 350
|
|
128
130
|
});
|
|
129
131
|
</script><code contenteditable="true">const { default: Diff } = await import('/components/data-display/diff.js');
|
|
130
132
|
const { $ } = Lightview;
|
|
131
133
|
|
|
132
134
|
const diff = {
|
|
133
135
|
tag: Diff,
|
|
134
|
-
attributes: {
|
|
136
|
+
attributes: { style: 'max-width: 500px; min-height: 300px;' },
|
|
135
137
|
children: [
|
|
136
138
|
{ tag: Diff.Item1, attributes: { src: 'https://picsum.photos/600/400?grayscale', alt: 'Before (Grayscale)' } },
|
|
137
139
|
{ tag: Diff.Item2, attributes: { src: 'https://picsum.photos/600/400', alt: 'After (Color)' } },
|
|
@@ -149,7 +151,7 @@ $('#example').content(diff);</code></pre>
|
|
|
149
151
|
at: document.currentScript.parentElement,
|
|
150
152
|
scripts: ['/lightview.js', '/lightview-x.js'],
|
|
151
153
|
type: 'module',
|
|
152
|
-
minHeight:
|
|
154
|
+
minHeight: 350
|
|
153
155
|
});
|
|
154
156
|
</script><code contenteditable="true">const { default: Diff } = await import('/components/data-display/diff.js');
|
|
155
157
|
const { tags, $ } = Lightview;
|
|
@@ -160,8 +162,7 @@ tags['Diff.Resizer'] = Diff.Resizer;
|
|
|
160
162
|
|
|
161
163
|
const diff = {
|
|
162
164
|
Diff: {
|
|
163
|
-
|
|
164
|
-
style: 'max-width: 500px;',
|
|
165
|
+
style: 'max-width: 500px; min-height: 300px;',
|
|
165
166
|
children: [
|
|
166
167
|
{ 'Diff.Item1': { src: 'https://picsum.photos/600/400?grayscale', alt: 'Before (Grayscale)' } },
|
|
167
168
|
{ 'Diff.Item2': { src: 'https://picsum.photos/600/400', alt: 'After (Color)' } },
|
|
@@ -172,6 +173,26 @@ const diff = {
|
|
|
172
173
|
|
|
173
174
|
$('#example').content(diff);</code></pre>
|
|
174
175
|
</div>
|
|
176
|
+
|
|
177
|
+
<!-- HTML Syntax -->
|
|
178
|
+
<div id="syntax-html" style="display: none;">
|
|
179
|
+
<pre><script>
|
|
180
|
+
examplify(document.currentScript.nextElementSibling, {
|
|
181
|
+
at: document.currentScript.parentElement,
|
|
182
|
+
scripts: ['/lightview.js', '/lightview-x.js'],
|
|
183
|
+
type: 'module',
|
|
184
|
+
language: 'html',
|
|
185
|
+
minHeight: 350
|
|
186
|
+
});
|
|
187
|
+
</script><code contenteditable="true" class="language-html"><!-- Import the component (registers lv-diff, lv-diff-item1, etc.) -->
|
|
188
|
+
<script type="module" src="/components/data-display/diff.js"></script>
|
|
189
|
+
|
|
190
|
+
<lv-diff style="max-width: 500px; min-height: 300px;">
|
|
191
|
+
<lv-diff-item1 src="https://picsum.photos/600/400?grayscale" alt="Before"></lv-diff-item1>
|
|
192
|
+
<lv-diff-item2 src="https://picsum.photos/600/400" alt="After"></lv-diff-item2>
|
|
193
|
+
<lv-diff-resizer></lv-diff-resizer>
|
|
194
|
+
</lv-diff></code></pre>
|
|
195
|
+
</div>
|
|
175
196
|
</div>
|
|
176
197
|
</div>
|
|
177
198
|
|
|
@@ -189,10 +210,10 @@ $('#example').content(diff);</code></pre>
|
|
|
189
210
|
</thead>
|
|
190
211
|
<tbody>
|
|
191
212
|
<tr>
|
|
192
|
-
<td
|
|
213
|
+
<td>aspectRatio</td>
|
|
193
214
|
<td>string</td>
|
|
194
|
-
<td
|
|
195
|
-
<td>Aspect ratio class (aspect-
|
|
215
|
+
<td>'aspect-video'</td>
|
|
216
|
+
<td>Aspect ratio class (aspect-video, aspect-square, etc.)</td>
|
|
196
217
|
</tr>
|
|
197
218
|
</tbody>
|
|
198
219
|
</table>
|
|
@@ -213,12 +234,12 @@ $('#example').content(diff);</code></pre>
|
|
|
213
234
|
<tr>
|
|
214
235
|
<td><code>Diff.Item1</code></td>
|
|
215
236
|
<td>src, alt</td>
|
|
216
|
-
<td>
|
|
237
|
+
<td>Top comparison item (The "Before" overlay)</td>
|
|
217
238
|
</tr>
|
|
218
239
|
<tr>
|
|
219
240
|
<td><code>Diff.Item2</code></td>
|
|
220
241
|
<td>src, alt</td>
|
|
221
|
-
<td>
|
|
242
|
+
<td>Bottom comparison item (The "After" background)</td>
|
|
222
243
|
</tr>
|
|
223
244
|
<tr>
|
|
224
245
|
<td><code>Diff.Resizer</code></td>
|
|
@@ -229,16 +250,7 @@ $('#example').content(diff);</code></pre>
|
|
|
229
250
|
</table>
|
|
230
251
|
</div>
|
|
231
252
|
|
|
232
|
-
|
|
233
|
-
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Interactive Demo</h2>
|
|
234
|
-
<p class="text-sm" style="opacity: 0.7; margin-bottom: 0.5rem;">Drag the divider to compare images:
|
|
235
|
-
</p>
|
|
236
|
-
<div class="diff aspect-16/9" style="max-width: 600px; margin-bottom: 2rem;">
|
|
237
|
-
<div class="diff-item-1"><img src="https://picsum.photos/600/400?grayscale" alt="Before" />
|
|
238
|
-
</div>
|
|
239
|
-
<div class="diff-item-2"><img src="https://picsum.photos/600/400" alt="After" /></div>
|
|
240
|
-
<div class="diff-resizer"></div>
|
|
241
|
-
</div>
|
|
253
|
+
|
|
242
254
|
</div>
|
|
243
255
|
</div>
|
|
244
256
|
</div>
|
|
@@ -80,6 +80,13 @@
|
|
|
80
80
|
<section style="margin-bottom: 3rem;">
|
|
81
81
|
<h2 class="text-xl font-bold mb-4" style="display: flex; align-items: center; gap: 0.5rem">
|
|
82
82
|
<span class="badge badge-primary">Buttons</span>
|
|
83
|
+
<a href="/docs/components/button" class="info-link" aria-label="View Button Details">
|
|
84
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
85
|
+
class="info-icon" style="stroke: currentColor; stroke-width: 2;">
|
|
86
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
87
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
88
|
+
</svg>
|
|
89
|
+
</a>
|
|
83
90
|
</h2>
|
|
84
91
|
<div class="card bg-base-200">
|
|
85
92
|
<div class="card-body">
|
|
@@ -131,6 +138,13 @@
|
|
|
131
138
|
<section style="margin-bottom: 3rem;">
|
|
132
139
|
<h2 class="text-xl font-bold mb-4" style="display: flex; align-items: center; gap: 0.5rem">
|
|
133
140
|
<span class="badge badge-accent">Inputs</span>
|
|
141
|
+
<a href="/docs/components/input" class="info-link" aria-label="View Input Details">
|
|
142
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
143
|
+
class="info-icon" style="stroke: currentColor; stroke-width: 2;">
|
|
144
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
145
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
146
|
+
</svg>
|
|
147
|
+
</a>
|
|
134
148
|
</h2>
|
|
135
149
|
<div class="card bg-base-200">
|
|
136
150
|
<div class="card-body">
|
|
@@ -207,6 +221,13 @@
|
|
|
207
221
|
<section style="margin-bottom: 3rem;">
|
|
208
222
|
<h2 class="text-xl font-bold mb-4" style="display: flex; align-items: center; gap: 0.5rem">
|
|
209
223
|
<span class="badge badge-secondary">Cards</span>
|
|
224
|
+
<a href="/docs/components/card" class="info-link" aria-label="View Card Details">
|
|
225
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
226
|
+
class="info-icon" style="stroke: currentColor; stroke-width: 2;">
|
|
227
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
228
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
229
|
+
</svg>
|
|
230
|
+
</a>
|
|
210
231
|
</h2>
|
|
211
232
|
<div class="grid md:grid-cols-3" style="gap: 1rem;">
|
|
212
233
|
<div class="card bg-base-100 shadow-xl">
|
|
@@ -254,6 +275,13 @@
|
|
|
254
275
|
<section style="margin-bottom: 3rem;">
|
|
255
276
|
<h2 class="text-xl font-bold mb-4" style="display: flex; align-items: center; gap: 0.5rem">
|
|
256
277
|
<span class="badge badge-info">Alerts</span>
|
|
278
|
+
<a href="/docs/components/alert" class="info-link" aria-label="View Alert Details">
|
|
279
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
280
|
+
class="info-icon" style="stroke: currentColor; stroke-width: 2;">
|
|
281
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
282
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
283
|
+
</svg>
|
|
284
|
+
</a>
|
|
257
285
|
</h2>
|
|
258
286
|
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
|
259
287
|
<div role="alert" class="alert alert-info">
|
|
@@ -295,6 +323,13 @@
|
|
|
295
323
|
<section style="margin-bottom: 3rem;">
|
|
296
324
|
<h2 class="text-xl font-bold mb-4" style="display: flex; align-items: center; gap: 0.5rem">
|
|
297
325
|
<span class="badge badge-success">Badges</span>
|
|
326
|
+
<a href="/docs/components/badge" class="info-link" aria-label="View Badge Details">
|
|
327
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
328
|
+
class="info-icon" style="stroke: currentColor; stroke-width: 2;">
|
|
329
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
330
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
331
|
+
</svg>
|
|
332
|
+
</a>
|
|
298
333
|
</h2>
|
|
299
334
|
<div class="card bg-base-200">
|
|
300
335
|
<div class="card-body">
|
|
@@ -328,6 +363,14 @@
|
|
|
328
363
|
<section style="margin-bottom: 3rem;">
|
|
329
364
|
<h2 class="text-xl font-bold mb-4" style="display: flex; align-items: center; gap: 0.5rem">
|
|
330
365
|
<span class="badge badge-warning">Progress</span>
|
|
366
|
+
<a href="/docs/components/progress" class="info-link" aria-label="View Progress Details"
|
|
367
|
+
style="margin-left: 0.25rem;">
|
|
368
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
369
|
+
class="info-icon" style="stroke: currentColor; stroke-width: 2;">
|
|
370
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
371
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
372
|
+
</svg>
|
|
373
|
+
</a>
|
|
331
374
|
</h2>
|
|
332
375
|
<div class="card bg-base-200">
|
|
333
376
|
<div class="card-body">
|
|
@@ -340,7 +383,19 @@
|
|
|
340
383
|
<progress class="progress progress-success w-full" value="100" max="100"></progress>
|
|
341
384
|
</div>
|
|
342
385
|
|
|
343
|
-
<h3 class="font-semibold"
|
|
386
|
+
<h3 class="font-semibold"
|
|
387
|
+
style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
|
|
388
|
+
Loading Spinners
|
|
389
|
+
<a href="/docs/components/loading" class="info-link"
|
|
390
|
+
aria-label="View Loading Details">
|
|
391
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
392
|
+
class="info-icon"
|
|
393
|
+
style="stroke: currentColor; stroke-width: 2; width: 16px; height: 16px;">
|
|
394
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
395
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
396
|
+
</svg>
|
|
397
|
+
</a>
|
|
398
|
+
</h3>
|
|
344
399
|
<div style="display: flex; flex-wrap: wrap; gap: 1rem;">
|
|
345
400
|
<span class="loading loading-spinner loading-lg"></span>
|
|
346
401
|
<span class="loading loading-dots loading-lg"></span>
|
|
@@ -357,6 +412,13 @@
|
|
|
357
412
|
<section style="margin-bottom: 3rem;">
|
|
358
413
|
<h2 class="text-xl font-bold mb-4" style="display: flex; align-items: center; gap: 0.5rem">
|
|
359
414
|
<span class="badge badge-error">Avatars</span>
|
|
415
|
+
<a href="/docs/components/avatar" class="info-link" aria-label="View Avatar Details">
|
|
416
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
417
|
+
class="info-icon" style="stroke: currentColor; stroke-width: 2;">
|
|
418
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
419
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
420
|
+
</svg>
|
|
421
|
+
</a>
|
|
360
422
|
</h2>
|
|
361
423
|
<div class="card bg-base-200">
|
|
362
424
|
<div class="card-body">
|
|
@@ -425,14 +487,36 @@
|
|
|
425
487
|
</h2>
|
|
426
488
|
<div class="card bg-base-200">
|
|
427
489
|
<div class="card-body">
|
|
428
|
-
<h3 class="font-semibold"
|
|
490
|
+
<h3 class="font-semibold"
|
|
491
|
+
style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
|
|
492
|
+
Tabs
|
|
493
|
+
<a href="/docs/components/tabs" class="info-link" aria-label="View Tabs Details">
|
|
494
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
495
|
+
class="info-icon"
|
|
496
|
+
style="stroke: currentColor; stroke-width: 2; width: 16px; height: 16px;">
|
|
497
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
498
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
499
|
+
</svg>
|
|
500
|
+
</a>
|
|
501
|
+
</h3>
|
|
429
502
|
<div role="tablist" class="tabs tabs-boxed" style="margin-bottom: 1.5rem;">
|
|
430
503
|
<a role="tab" class="tab tab-active">Tab 1</a>
|
|
431
504
|
<a role="tab" class="tab">Tab 2</a>
|
|
432
505
|
<a role="tab" class="tab">Tab 3</a>
|
|
433
506
|
</div>
|
|
434
507
|
|
|
435
|
-
<h3 class="font-semibold"
|
|
508
|
+
<h3 class="font-semibold"
|
|
509
|
+
style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
|
|
510
|
+
Steps
|
|
511
|
+
<a href="/docs/components/steps" class="info-link" aria-label="View Steps Details">
|
|
512
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
513
|
+
class="info-icon"
|
|
514
|
+
style="stroke: currentColor; stroke-width: 2; width: 16px; height: 16px;">
|
|
515
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
516
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
517
|
+
</svg>
|
|
518
|
+
</a>
|
|
519
|
+
</h3>
|
|
436
520
|
<ul class="steps" style="margin-bottom: 1.5rem;">
|
|
437
521
|
<li class="step step-primary">Register</li>
|
|
438
522
|
<li class="step step-primary">Choose plan</li>
|
|
@@ -440,7 +524,19 @@
|
|
|
440
524
|
<li class="step">Receive Product</li>
|
|
441
525
|
</ul>
|
|
442
526
|
|
|
443
|
-
<h3 class="font-semibold"
|
|
527
|
+
<h3 class="font-semibold"
|
|
528
|
+
style="margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
|
|
529
|
+
Breadcrumbs
|
|
530
|
+
<a href="/docs/components/breadcrumbs" class="info-link"
|
|
531
|
+
aria-label="View Breadcrumbs Details">
|
|
532
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
533
|
+
class="info-icon"
|
|
534
|
+
style="stroke: currentColor; stroke-width: 2; width: 16px; height: 16px;">
|
|
535
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
536
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
537
|
+
</svg>
|
|
538
|
+
</a>
|
|
539
|
+
</h3>
|
|
444
540
|
<div class="breadcrumbs text-sm">
|
|
445
541
|
<ul>
|
|
446
542
|
<li><a>Home</a></li>
|
|
@@ -456,6 +552,13 @@
|
|
|
456
552
|
<section style="margin-bottom: 3rem;">
|
|
457
553
|
<h2 class="text-xl font-bold mb-4" style="display: flex; align-items: center; gap: 0.5rem">
|
|
458
554
|
<span class="badge">Stats</span>
|
|
555
|
+
<a href="/docs/components/stats" class="info-link" aria-label="View Stats Details">
|
|
556
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
557
|
+
class="info-icon" style="stroke: currentColor; stroke-width: 2;">
|
|
558
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
559
|
+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
560
|
+
</svg>
|
|
561
|
+
</a>
|
|
459
562
|
</h2>
|
|
460
563
|
<div class="stats shadow w-full">
|
|
461
564
|
<div class="stat">
|
|
@@ -230,6 +230,15 @@
|
|
|
230
230
|
margin: 0;
|
|
231
231
|
}
|
|
232
232
|
|
|
233
|
+
#theme-toggle-container select {
|
|
234
|
+
border-color: var(--gallery-border);
|
|
235
|
+
transition: all var(--gallery-transition);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
#theme-toggle-container select:hover {
|
|
239
|
+
border-color: var(--gallery-primary);
|
|
240
|
+
}
|
|
241
|
+
|
|
233
242
|
/* ============= Content Area ============= */
|
|
234
243
|
.gallery-content {
|
|
235
244
|
padding: 2rem;
|
|
@@ -298,12 +307,18 @@
|
|
|
298
307
|
justify-content: center;
|
|
299
308
|
width: 24px;
|
|
300
309
|
height: 24px;
|
|
301
|
-
color: var(--gallery-
|
|
302
|
-
transition:
|
|
310
|
+
color: var(--gallery-primary);
|
|
311
|
+
transition: all var(--gallery-transition);
|
|
312
|
+
flex-shrink: 0;
|
|
313
|
+
position: relative;
|
|
314
|
+
z-index: 1;
|
|
315
|
+
opacity: 0.8;
|
|
303
316
|
}
|
|
304
317
|
|
|
305
318
|
.info-link:hover {
|
|
306
|
-
color: var(--gallery-primary);
|
|
319
|
+
color: var(--gallery-primary-hover);
|
|
320
|
+
opacity: 1;
|
|
321
|
+
transform: scale(1.1);
|
|
307
322
|
}
|
|
308
323
|
|
|
309
324
|
.info-icon {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
<div class="gallery-intro">
|
|
40
40
|
<p>Explore all Lightview components powered by DaisyUI. Use the sidebar (<code>>></code>) to
|
|
41
41
|
navigate to individual
|
|
42
|
-
component documentation, or browse just a few examples below and click on the
|
|
42
|
+
component documentation, or browse just a few examples below and click on the ⓘ icons
|
|
43
43
|
to see more documentation.</p>
|
|
44
44
|
</div>
|
|
45
45
|
|
|
@@ -226,10 +226,7 @@ $('#example').content(app);</code></pre>
|
|
|
226
226
|
document.querySelector('.gallery-layout').classList.add('js-ready');
|
|
227
227
|
|
|
228
228
|
// Info icon helper (shared via window)
|
|
229
|
-
globalThis.InfoIcon = () =>
|
|
230
|
-
{ xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", class: "info-icon", style: "stroke: currentColor;" },
|
|
231
|
-
path({ "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
|
|
232
|
-
);
|
|
229
|
+
globalThis.InfoIcon = () => tags.span({ class: "info-icon-char", style: "font-size: 1.2rem; font-weight: bold; font-style: normal;" }, "ⓘ");
|
|
233
230
|
</script>
|
|
234
231
|
|
|
235
232
|
|
|
@@ -304,7 +301,8 @@ $('#example').content(app);</code></pre>
|
|
|
304
301
|
|
|
305
302
|
const content = div({},
|
|
306
303
|
div({ class: "section-header" },
|
|
307
|
-
span({ class: "section-badge accent" }, "Inputs")
|
|
304
|
+
span({ class: "section-badge accent" }, "Inputs"),
|
|
305
|
+
a({ href: "/docs/components/input", class: "info-link", "aria-label": "View Input Docs" }, InfoIcon())
|
|
308
306
|
),
|
|
309
307
|
Card({ styleSheets: ['/docs/components/index.css'] },
|
|
310
308
|
Card.Body({},
|
|
@@ -531,10 +529,14 @@ $('#example').content(app);</code></pre>
|
|
|
531
529
|
const content = div({},
|
|
532
530
|
div({ class: "section-header" },
|
|
533
531
|
span({ class: "section-badge" }, "Charts"),
|
|
534
|
-
a({ href: "/docs/components/chart", class: "info-link" }, InfoIcon())
|
|
532
|
+
a({ href: "/docs/components/chart", class: "info-link", "aria-label": "View Charts Docs" }, InfoIcon())
|
|
535
533
|
),
|
|
536
534
|
Card({ styleSheets: ['/docs/components/index.css'] },
|
|
537
535
|
Card.Body({},
|
|
536
|
+
div({ class: "form-label" },
|
|
537
|
+
span({ class: "label-text" }, "Bar Chart"),
|
|
538
|
+
a({ href: "/docs/components/chart-bar", class: "info-link", "aria-label": "View Bar Chart Details" }, InfoIcon())
|
|
539
|
+
),
|
|
538
540
|
Chart({
|
|
539
541
|
type: "bar",
|
|
540
542
|
showLabels: true,
|
|
@@ -578,7 +580,10 @@ $('#example').content(app);</code></pre>
|
|
|
578
580
|
Card.Body({},
|
|
579
581
|
div({ class: "component-grid-2" },
|
|
580
582
|
div({},
|
|
581
|
-
div({ class: "
|
|
583
|
+
div({ class: "form-label" },
|
|
584
|
+
span({ class: "label-text" }, "Bars"),
|
|
585
|
+
a({ href: "/docs/components/progress", class: "info-link", "aria-label": "View Progress Docs" }, InfoIcon())
|
|
586
|
+
),
|
|
582
587
|
div({ class: "progress-stack" },
|
|
583
588
|
Progress({ value: 0 }),
|
|
584
589
|
Progress({ value: 40, color: "primary" }),
|
|
@@ -587,7 +592,13 @@ $('#example').content(app);</code></pre>
|
|
|
587
592
|
)
|
|
588
593
|
),
|
|
589
594
|
div({},
|
|
590
|
-
div({ class: "
|
|
595
|
+
div({ class: "form-label" },
|
|
596
|
+
span({ class: "label-text" }, "Radial & Loading"),
|
|
597
|
+
div({ style: "display: flex; gap: 0.25rem;" },
|
|
598
|
+
a({ href: "/docs/components/radial-progress", class: "info-link", title: "Radial Progress", "aria-label": "View Radial Progress Docs" }, InfoIcon()),
|
|
599
|
+
a({ href: "/docs/components/loading", class: "info-link", title: "Loading", "aria-label": "View Loading Docs" }, InfoIcon())
|
|
600
|
+
)
|
|
601
|
+
),
|
|
591
602
|
div({ class: "loading-row" },
|
|
592
603
|
RadialProgress({ value: 70, color: "primary" }, "70%"),
|
|
593
604
|
Loading({ type: "spinner", color: "primary" }),
|