lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
557 lines (508 loc) • 27.1 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Progress' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Progress</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Progress bar shows the progression of a task.
Supports reactive values and multiple colors.
</p>
<!-- Basic Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Example</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Progress bars with different
colors</p>
<!-- Tabs -->
<script>
globalThis.switchSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object', 'html'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-${t}`);
const contentEl = document.getElementById(`syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-object" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('object')">Object
DOM</button>
<button id="tab-btn-html" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('html')">HTML</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/progress.js');
const { tags, $ } = Lightview;
const { div, Progress } = tags;
const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'];
const progressBars = div({ style: 'display: flex; flex-direction: column; gap: 1rem; width: 16rem;' },
...colors.map((color, i) =>
Progress({
value: 30 + i * 10,
max: 100,
color
})
)
);
$('#example').content(progressBars);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220
});
</script><code contenteditable="true">await import('/components/data-display/progress.js');
const { $, tags } = Lightview;
const { Progress, div } = tags;
const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'];
const progressBars = {
tag: div,
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; width: 16rem;' },
children: colors.map((color, i) => ({
tag: Progress,
attributes: {
value: 30 + i * 10,
max: 100,
color
}
}))
};
$('#example').content(progressBars);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220
});
</script><code contenteditable="true">await import('/components/data-display/progress.js');
const { $ } = Lightview;
const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'];
const progressBars = {
div: {
style: 'display: flex; flex-direction: column; gap: 1rem; width: 16rem;',
children: colors.map((color, i) => ({
Progress: {
value: 30 + i * 10,
max: 100,
color
}
}))
}
};
$('#example').content(progressBars);</code></pre>
</div>
<!-- HTML Syntax -->
<div id="syntax-html" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
language: 'html',
minHeight: 220
});
</script><code contenteditable="true" class="language-html"><!-- Import the component (registers lv-progress) -->
<script type="module" src="/components/data-display/progress.js"></script>
<div style="display: flex; flex-direction: column; gap: 1rem; width: 16rem;">
<lv-progress value="30" color="primary"></lv-progress>
<lv-progress value="40" color="secondary"></lv-progress>
<lv-progress value="50" color="accent"></lv-progress>
<lv-progress value="60" color="info"></lv-progress>
<lv-progress value="70" color="success"></lv-progress>
<lv-progress value="80" color="warning"></lv-progress>
<lv-progress value="90" color="error"></lv-progress>
</div></code></pre>
</div>
</div>
</div>
<!-- Reactive Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Animated Progress</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Reactive progress with live
updates</p>
<!-- Tabs -->
<script>
globalThis.switchReactiveSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-reactive-${t}`);
const contentEl = document.getElementById(`syntax-reactive-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-reactive-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-reactive-vdom" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-reactive-object" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-reactive-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 140
});
</script><code contenteditable="true">await import('/components/data-display/progress.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, p, Progress, Button } = tags;
const progress = signal(0);
const isRunning = signal(false);
let interval = null;
const startDownload = () => {
if (isRunning.value) return;
progress.value = 0;
isRunning.value = true;
interval = setInterval(() => {
progress.value += Math.random() * 15;
if (progress.value >= 100) {
progress.value = 100;
isRunning.value = false;
clearInterval(interval);
}
}, 200);
};
const demo = div({ style: 'display: flex; flex-direction: column; gap: 1rem; width: 18rem;' },
Progress({
value: () => progress.value,
max: 100,
color: 'success',
style: 'width: 100%;'
}),
p({ style: 'font-family: monospace; font-size: 0.875rem;' },
() => progress.value >= 100
? '✓ Complete!'
: `Downloading: ${Math.round(progress.value)}%`
),
Button({
color: 'primary',
size: 'sm',
disabled: () => isRunning.value,
onclick: startDownload
}, () => isRunning.value ? 'Downloading...' : 'Start Download')
);
$('#example').content(demo);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-reactive-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 140
});
</script><code contenteditable="true">await import('/components/data-display/progress.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { Progress, Button, div, p } = tags;
const progress = signal(0);
const isRunning = signal(false);
let interval = null;
const startDownload = () => {
if (isRunning.value) return;
progress.value = 0;
isRunning.value = true;
interval = setInterval(() => {
progress.value += Math.random() * 15;
if (progress.value >= 100) {
progress.value = 100;
isRunning.value = false;
clearInterval(interval);
}
}, 200);
};
const demo = {
tag: div,
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; width: 18rem;' },
children: [
{
tag: Progress,
attributes: {
value: () => progress.value,
max: 100,
color: 'success',
style: 'width: 100%;'
}
},
{
tag: p,
attributes: { style: 'font-family: monospace; font-size: 0.875rem;' },
children: [
() => progress.value >= 100
? '✓ Complete!'
: `Downloading: ${Math.round(progress.value)}%`
]
},
{
tag: Button,
attributes: {
color: 'primary',
size: 'sm',
disabled: () => isRunning.value,
onclick: startDownload
},
children: [() => isRunning.value ? 'Downloading...' : 'Start Download']
}
]
};
$('#example').content(demo);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-reactive-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 140
});
</script><code contenteditable="true">await import('/components/data-display/progress.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;
const progress = signal(0);
const isRunning = signal(false);
let interval = null;
const startDownload = () => {
if (isRunning.value) return;
progress.value = 0;
isRunning.value = true;
interval = setInterval(() => {
progress.value += Math.random() * 15;
if (progress.value >= 100) {
progress.value = 100;
isRunning.value = false;
clearInterval(interval);
}
}, 200);
};
const demo = {
div: {
style: 'display: flex; flex-direction: column; gap: 1rem; width: 18rem;',
children: [
{
Progress: {
value: () => progress.value,
max: 100,
color: 'success',
style: 'width: 100%;'
}
},
{
p: {
style: 'font-family: monospace; font-size: 0.875rem;',
children: [
() => progress.value >= 100
? '✓ Complete!'
: `Downloading: ${Math.round(progress.value)}%`
]
}
},
{
Button: {
color: 'primary',
size: 'sm',
disabled: () => isRunning.value,
onclick: startDownload,
children: [() => isRunning.value ? 'Downloading...' : 'Start Download']
}
}
]
}
};
$('#example').content(demo);</code></pre>
</div>
</div>
</div>
<!-- Props Table -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Props</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>value</code></td>
<td>number | function</td>
<td>0</td>
<td>Current progress value (reactive)</td>
</tr>
<tr>
<td><code>max</code></td>
<td>number</td>
<td>100</td>
<td>Maximum value</td>
</tr>
<tr>
<td><code>color</code></td>
<td>string</td>
<td>-</td>
<td>'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'
</td>
</tr>
</tbody>
</table>
</div>
<!-- Colors -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
<div style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem;">
<progress class="progress progress-primary" style="width: 14rem;" value="40"
max="100"></progress>
<progress class="progress progress-secondary" style="width: 14rem;" value="50"
max="100"></progress>
<progress class="progress progress-accent" style="width: 14rem;" value="60"
max="100"></progress>
<progress class="progress progress-info" style="width: 14rem;" value="70" max="100"></progress>
<progress class="progress progress-success" style="width: 14rem;" value="80"
max="100"></progress>
<progress class="progress progress-warning" style="width: 14rem;" value="90"
max="100"></progress>
<progress class="progress progress-error" style="width: 14rem;" value="100"
max="100"></progress>
</div>
<!-- Indeterminate -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Indeterminate</h2>
<p style="font-size: 0.875rem; opacity: 0.7; margin-bottom: 0.5rem;">Omit the value attribute for
indeterminate state
</p>
<div style="margin-bottom: 2rem;">
<progress class="progress" style="width: 14rem;"></progress>
</div>
>
<!-- Custom Element Gallery -->
<h2 class="text-xl font-bold" style="margin-top: 3rem; margin-bottom: 1rem;">Custom Element Gallery
</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1.5rem;">
Live examples using <code><lv-progress></code> custom elements.
</p>
<script type="module" src="/components/data-display/progress.js"></script>
<!-- All Colors -->
<h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">All Colors</h3>
<div style="display: flex; flex-direction: column; gap: 0.5rem; width: 16rem; margin-bottom: 2rem;">
<lv-progress value="30" color="primary"></lv-progress>
<lv-progress value="40" color="secondary"></lv-progress>
<lv-progress value="50" color="accent"></lv-progress>
<lv-progress value="60" color="info"></lv-progress>
<lv-progress value="70" color="success"></lv-progress>
<lv-progress value="80" color="warning"></lv-progress>
<lv-progress value="90" color="error"></lv-progress>
</div>
<!-- Different Values -->
<h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Different Values</h3>
<div style="display: flex; flex-direction: column; gap: 0.5rem; width: 16rem; margin-bottom: 2rem;">
<lv-progress value="10" color="primary"></lv-progress>
<lv-progress value="25" color="primary"></lv-progress>
<lv-progress value="50" color="primary"></lv-progress>
<lv-progress value="75" color="primary"></lv-progress>
<lv-progress value="100" color="primary"></lv-progress>
</div>
<!-- Indeterminate -->
<h3 class="text-lg font-semibold" style="margin-bottom: 0.75rem;">Indeterminate (No Value)</h3>
<div style="width: 16rem; margin-bottom: 2rem;">
<lv-progress color="primary"></lv-progress>
</div>
</div>
</div>
</div>