246 lines
8.9 KiB
TypeScript
246 lines
8.9 KiB
TypeScript
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-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>
|
|
`;
|
|
};
|