feat(dees-progressbar): add status panels, terminal output, and legacy progress input support
This commit is contained in:
@@ -1,11 +1,245 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
|
||||
import { DeesProgressbar } from '../dees-progressbar/dees-progressbar.js';
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import type { DeesProgressbar } from './dees-progressbar.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
const terminalSnapshots = [
|
||||
['Resolving workspace packages'],
|
||||
['Resolving workspace packages', 'Downloading ui-assets.tar.gz'],
|
||||
['Resolving workspace packages', 'Downloading ui-assets.tar.gz', 'Verifying checksum'],
|
||||
['Resolving workspace packages', 'Downloading ui-assets.tar.gz', 'Verifying checksum', 'Extracting release bundle'],
|
||||
['Resolving workspace packages', 'Downloading ui-assets.tar.gz', 'Verifying checksum', 'Extracting release bundle', 'Restarting application'],
|
||||
];
|
||||
|
||||
const getUploadStatus = (percentage: number): string => {
|
||||
if (percentage >= 100) {
|
||||
return 'Upload complete. Finalizing package manifest...';
|
||||
}
|
||||
|
||||
if (percentage >= 82) {
|
||||
return 'Verifying checksums before handoff...';
|
||||
}
|
||||
|
||||
if (percentage >= 55) {
|
||||
return 'Uploading thumbnails to edge cache...';
|
||||
}
|
||||
|
||||
if (percentage >= 25) {
|
||||
return 'Streaming source files to the remote worker...';
|
||||
}
|
||||
|
||||
return 'Preparing archive and dependency graph...';
|
||||
};
|
||||
|
||||
return html`
|
||||
<dees-progressbar
|
||||
.percentage=${50}
|
||||
></dees-progressbar>
|
||||
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
const liveProgressbar = elementArg.querySelector('#live-progress') as DeesProgressbar | null;
|
||||
const terminalProgressbar = elementArg.querySelector('#terminal-progress') as DeesProgressbar | null;
|
||||
const demoElement = elementArg as HTMLElement & {
|
||||
__progressbarDemoIntervalId?: number;
|
||||
};
|
||||
|
||||
if (!liveProgressbar || !terminalProgressbar) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (demoElement.__progressbarDemoIntervalId) {
|
||||
window.clearInterval(demoElement.__progressbarDemoIntervalId);
|
||||
}
|
||||
|
||||
let livePercentage = 12;
|
||||
let terminalSnapshotIndex = 0;
|
||||
|
||||
const updateDemo = () => {
|
||||
liveProgressbar.percentage = livePercentage;
|
||||
liveProgressbar.statusText = getUploadStatus(livePercentage);
|
||||
|
||||
terminalProgressbar.terminalLines = [...terminalSnapshots[terminalSnapshotIndex]];
|
||||
terminalProgressbar.percentage = Math.min(100, (terminalSnapshotIndex + 1) * 20);
|
||||
terminalProgressbar.indeterminate = terminalSnapshotIndex < terminalSnapshots.length - 1;
|
||||
|
||||
livePercentage = livePercentage >= 100 ? 12 : Math.min(100, livePercentage + 11);
|
||||
terminalSnapshotIndex = terminalSnapshotIndex >= terminalSnapshots.length - 1 ? 0 : terminalSnapshotIndex + 1;
|
||||
};
|
||||
|
||||
updateDemo();
|
||||
demoElement.__progressbarDemoIntervalId = window.setInterval(updateDemo, 1400);
|
||||
}}>
|
||||
<style>
|
||||
${css`
|
||||
.demoBox {
|
||||
position: relative;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.demoIntro {
|
||||
max-width: 720px;
|
||||
color: ${cssManager.bdTheme('hsl(215 20% 30%)', 'hsl(215 18% 76%)')};
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.showcaseGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.showcaseCard {
|
||||
background: ${cssManager.bdTheme('rgba(255,255,255,0.78)', 'rgba(255,255,255,0.04)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(210 22% 86%)', 'hsl(210 10% 18%)')};
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.showcaseCard.wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.showcaseCard h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.showcaseCard p {
|
||||
margin: 0;
|
||||
color: ${cssManager.bdTheme('hsl(215 14% 40%)', 'hsl(215 10% 66%)')};
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.progressStack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.codeLabel {
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
color: ${cssManager.bdTheme('hsl(215 14% 44%)', 'hsl(215 10% 70%)')};
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.demoBox {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.showcaseCard.wide {
|
||||
grid-column: span 1;
|
||||
}
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<div class="demoBox">
|
||||
<div class="demoIntro">
|
||||
<code>dees-progressbar</code> can now pair a classic progress bar with a fixed-height status area. Use simple status text for clear user-facing updates or switch to terminal-like lines when you want recent steps to stay visible without causing layout jumps.
|
||||
</div>
|
||||
<div class="showcaseGrid">
|
||||
<section class="showcaseCard">
|
||||
<div class="codeLabel">Determinate</div>
|
||||
<h3>Percentage plus current task</h3>
|
||||
<p>Use a label, a percentage, and one short status line when the work is measurable.</p>
|
||||
<div class="progressStack">
|
||||
<dees-progressbar
|
||||
label="Media upload"
|
||||
.percentage=${68}
|
||||
statusText="Uploading thumbnails to edge cache..."
|
||||
.statusRows=${2}
|
||||
></dees-progressbar>
|
||||
<dees-progressbar
|
||||
label="Asset sync"
|
||||
.percentage=${100}
|
||||
statusText="All files are synced and available."
|
||||
.statusRows=${2}
|
||||
></dees-progressbar>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="showcaseCard">
|
||||
<div class="codeLabel">Indeterminate</div>
|
||||
<h3>Spinner-style text indicator</h3>
|
||||
<p>When there is no trustworthy percentage yet, keep the bar moving and let the text explain what is happening.</p>
|
||||
<div class="progressStack">
|
||||
<dees-progressbar
|
||||
label="Dependency install"
|
||||
.indeterminate=${true}
|
||||
statusText="Downloading package metadata..."
|
||||
.statusRows=${2}
|
||||
></dees-progressbar>
|
||||
<dees-progressbar
|
||||
label="Queued job"
|
||||
.percentage=${32}
|
||||
.showPercentage=${false}
|
||||
statusText="Waiting for a worker slot to become available..."
|
||||
.statusRows=${2}
|
||||
></dees-progressbar>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="showcaseCard wide">
|
||||
<div class="codeLabel">Terminal Lines</div>
|
||||
<h3>Fixed-height terminal-style status output</h3>
|
||||
<p>The panel stays the same height while the latest step stays visible. This is useful for update flows, downloads, and staged background work.</p>
|
||||
<dees-progressbar
|
||||
id="terminal-progress"
|
||||
label="Release bundle"
|
||||
.percentage=${20}
|
||||
.indeterminate=${true}
|
||||
.statusRows=${4}
|
||||
.terminalLines=${terminalSnapshots[0]}
|
||||
></dees-progressbar>
|
||||
</section>
|
||||
|
||||
<section class="showcaseCard">
|
||||
<div class="codeLabel">Live Demo</div>
|
||||
<h3>Updating percentage and text together</h3>
|
||||
<p>A single component can express both how far the job is and which phase is currently active.</p>
|
||||
<dees-progressbar
|
||||
id="live-progress"
|
||||
label="Customer export"
|
||||
.percentage=${12}
|
||||
statusText="Preparing archive and dependency graph..."
|
||||
.statusRows=${2}
|
||||
></dees-progressbar>
|
||||
</section>
|
||||
|
||||
<section class="showcaseCard">
|
||||
<div class="codeLabel">Compatibility</div>
|
||||
<h3>Legacy <code>value</code> and <code>progress</code> inputs</h3>
|
||||
<p>Existing usages can keep passing percentages directly or normalized progress values from 0 to 1.</p>
|
||||
<div class="progressStack">
|
||||
<dees-progressbar
|
||||
label="From value"
|
||||
.value=${75}
|
||||
statusText="Migrating existing readme-style usage..."
|
||||
.statusRows=${2}
|
||||
></dees-progressbar>
|
||||
<dees-progressbar
|
||||
label="From progress"
|
||||
.progress=${0.42}
|
||||
.showPercentage=${false}
|
||||
statusText="Rendering normalized progress input..."
|
||||
.statusRows=${2}
|
||||
></dees-progressbar>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user