feat(stepper,updater): add progress-aware stepper flows and updater countdown states

This commit is contained in:
2026-04-16 14:21:16 +00:00
parent 2f4c47f0d2
commit 428d2741d1
7 changed files with 806 additions and 141 deletions
+49 -7
View File
@@ -1508,18 +1508,33 @@ const layer = await DeesWindowLayer.createAndShow({
### Navigation Components
#### `DeesStepper`
Multi-step navigation component for guided user flows.
Multi-step navigation component for guided user flows, including optional auto-advancing progress steps that can render `dees-progressbar` status output between form steps.
```typescript
<dees-stepper
.steps=${[
{ key: 'personal', label: 'Personal Info', content: html`<div>Form 1</div>` },
{ key: 'address', label: 'Address', content: html`<div>Form 2</div>` },
{ key: 'confirm', label: 'Confirmation', content: html`<div>Review</div>` }
{
title: 'Account Setup',
content: html`<dees-form>...</dees-form>`,
menuOptions: [{ name: 'Continue', action: async (stepper) => stepper?.goNext() }]
},
{
title: 'Provision Workspace',
content: html`<p>Preparing your environment...</p>`,
progressStep: {
label: 'Workspace setup',
indeterminate: true,
statusRows: 4,
terminalLines: ['Allocating workspace']
},
validationFunc: async (stepper, _element, signal) => {
stepper.updateProgressStep({ percentage: 35, statusText: 'Installing dependencies...' });
stepper.appendProgressStepLine('Installing dependencies');
if (signal?.aborted) return;
stepper.updateProgressStep({ percentage: 100, indeterminate: false, statusText: 'Workspace ready.' });
}
}
]}
currentStep="personal"
@step-change=${handleStepChange}
@complete=${handleComplete}
></dees-stepper>
```
@@ -1580,6 +1595,33 @@ Theme provider component that wraps children and provides CSS custom properties
- Works with dark/light mode
- Overrides cascade to all child components
#### `DeesUpdater`
Updater controller that opens a non-cancelable `dees-stepper` flow with a progress step and a ready step.
```typescript
const updater = await DeesUpdater.createAndShow({
currentVersion: '3.79.0',
updatedVersion: '3.80.0',
moreInfoUrl: 'https://code.foss.global/design.estate/dees-catalog',
changelogUrl: 'https://code.foss.global/design.estate/dees-catalog/-/blob/main/changelog.md',
successAction: 'reload',
successDelayMs: 10000,
});
updater.updateProgress({
percentage: 35,
statusText: 'Downloading signed bundle...',
terminalLines: ['Checking release manifest', 'Downloading signed bundle']
});
updater.appendProgressLine('Verifying checksum');
updater.updateProgress({ percentage: 72, statusText: 'Verifying checksum...' });
await updater.markUpdateReady();
```
After `markUpdateReady()`, the updater switches to a second countdown step with a determinate progress bar and runs the configured success action when the timer reaches zero.
---
### Workspace / IDE Components 💻