feat(stepper,updater): add progress-aware stepper flows and updater countdown states
This commit is contained in:
@@ -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 💻
|
||||
|
||||
Reference in New Issue
Block a user