feat(dees-stepper): refactor to use dees-tile and add overlay functionality
- Updated IStep interface to include optional footerContent for step-specific actions. - Implemented createAndShow static method for displaying stepper as an overlay with DeesWindowLayer. - Refactored render method to wrap each step in a dees-tile, separating header, body, and footer content. - Enhanced CSS for dual-mode operation, adjusting styles for overlay and inline modes. - Added z-index management for overlay stepper to ensure proper stacking with window layer. - Updated demo to include a button for launching the stepper as an overlay.
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import * as plugins from '../../00plugins.js';
|
||||
import * as colors from '../../00colors.js';
|
||||
|
||||
import {
|
||||
DeesElement,
|
||||
@@ -16,10 +15,15 @@ import {
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { stepperDemo } from './dees-stepper.demo.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import { cssGeistFontFamily } from '../../00fonts.js';
|
||||
import { zIndexRegistry } from '../../00zindex.js';
|
||||
import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
|
||||
import '../dees-tile/dees-tile.js';
|
||||
|
||||
export interface IStep {
|
||||
title: string;
|
||||
content: TemplateResult;
|
||||
footerContent?: TemplateResult;
|
||||
validationFunc?: (stepper: DeesStepper, htmlElement: HTMLElement, signal?: AbortSignal) => Promise<any>;
|
||||
onReturnToStepFunc?: (stepper: DeesStepper, htmlElement: HTMLElement) => Promise<any>;
|
||||
validationFuncCalled?: boolean;
|
||||
@@ -34,9 +38,32 @@ declare global {
|
||||
|
||||
@customElement('dees-stepper')
|
||||
export class DeesStepper extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = stepperDemo;
|
||||
public static demoGroups = ['Layout', 'Form'];
|
||||
|
||||
public static async createAndShow(optionsArg: {
|
||||
steps: IStep[];
|
||||
}): Promise<DeesStepper> {
|
||||
const body = document.body;
|
||||
const stepper = new DeesStepper();
|
||||
stepper.steps = optionsArg.steps;
|
||||
stepper.overlay = true;
|
||||
stepper.windowLayer = await DeesWindowLayer.createAndShow({ blur: true });
|
||||
stepper.windowLayer.addEventListener('click', async () => {
|
||||
await stepper.destroy();
|
||||
});
|
||||
body.append(stepper.windowLayer);
|
||||
body.append(stepper);
|
||||
|
||||
// Get z-index for stepper (should be above window layer)
|
||||
stepper.stepperZIndex = zIndexRegistry.getNextZIndex();
|
||||
zIndexRegistry.register(stepper, stepper.stepperZIndex);
|
||||
|
||||
return stepper;
|
||||
}
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
@@ -47,6 +74,17 @@ export class DeesStepper extends DeesElement {
|
||||
})
|
||||
accessor selectedStep!: IStep;
|
||||
|
||||
@property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
})
|
||||
accessor overlay: boolean = false;
|
||||
|
||||
@property({ type: Number, attribute: false })
|
||||
accessor stepperZIndex: number = 1000;
|
||||
|
||||
private windowLayer?: DeesWindowLayer;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
@@ -60,7 +98,18 @@ export class DeesStepper extends DeesElement {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: ${cssGeistFontFamily};
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
:host([overlay]) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.stepperContainer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -68,101 +117,120 @@ export class DeesStepper extends DeesElement {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.step {
|
||||
.stepperContainer.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.stepperContainer.predestroy {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in;
|
||||
}
|
||||
|
||||
dees-tile.step {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
transition: transform 0.7s cubic-bezier(0.87, 0, 0.13, 1), box-shadow 0.7s cubic-bezier(0.87, 0, 0.13, 1), filter 0.7s cubic-bezier(0.87, 0, 0.13, 1), border 0.7s cubic-bezier(0.87, 0, 0.13, 1);
|
||||
max-width: 500px;
|
||||
min-height: 300px;
|
||||
border-radius: 12px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0f0f11')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e2e8f0', '#272729')};
|
||||
color: ${cssManager.bdTheme('#0f172a', '#f5f5f5')};
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
filter: opacity(0.55) saturate(0.85);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
transition: transform 0.7s cubic-bezier(0.87, 0, 0.13, 1), filter 0.7s cubic-bezier(0.87, 0, 0.13, 1);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.step.selected {
|
||||
dees-tile.step.selected {
|
||||
pointer-events: all;
|
||||
filter: opacity(1) saturate(1);
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
.step.hiddenStep {
|
||||
dees-tile.step.hiddenStep {
|
||||
filter: opacity(0);
|
||||
}
|
||||
|
||||
.step.entrance {
|
||||
transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, border 0.35s ease;
|
||||
dees-tile.step.entrance {
|
||||
transition: transform 0.35s ease, filter 0.35s ease;
|
||||
}
|
||||
|
||||
.step.entrance.hiddenStep {
|
||||
dees-tile.step.entrance.hiddenStep {
|
||||
transform: translateY(16px);
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
dees-tile.step:last-child {
|
||||
margin-bottom: 100vh;
|
||||
}
|
||||
|
||||
.step .stepCounter {
|
||||
color: ${cssManager.bdTheme('#64748b', '#a1a1aa')};
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
padding: 6px 14px;
|
||||
font-size: 12px;
|
||||
border-radius: 999px;
|
||||
background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.5)', 'rgba(63, 63, 70, 0.45)')};
|
||||
border: 1px solid ${cssManager.bdTheme('rgba(226, 232, 240, 0.7)', 'rgba(63, 63, 70, 0.6)')};
|
||||
.stepperContainer.overlay dees-tile.step::part(outer) {
|
||||
box-shadow:
|
||||
0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
|
||||
0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
|
||||
0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
|
||||
}
|
||||
|
||||
.step .goBack {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
.step-header {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px 0 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.goBack-spacer {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.step-header .goBack {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 999px;
|
||||
border: 1px solid ${cssManager.bdTheme('rgba(226, 232, 240, 0.9)', 'rgba(63, 63, 70, 0.85)')};
|
||||
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.9)', 'rgba(39, 39, 42, 0.85)')};
|
||||
color: ${cssManager.bdTheme('#475569', '#d4d4d8')};
|
||||
line-height: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--dees-color-text-muted);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: border 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
|
||||
transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.step .goBack:hover {
|
||||
color: ${cssManager.bdTheme('#0f172a', '#fafafa')};
|
||||
border-color: ${cssManager.bdTheme(colors.dark.blue, colors.dark.blue)};
|
||||
background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.95)', 'rgba(63, 63, 70, 0.7)')};
|
||||
.step-header .goBack:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-secondary);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.step .goBack:active {
|
||||
color: ${cssManager.bdTheme('#0f172a', '#fafafa')};
|
||||
border-color: ${cssManager.bdTheme(colors.dark.blueActive, colors.dark.blueActive)};
|
||||
background: ${cssManager.bdTheme('rgba(226, 232, 240, 0.85)', 'rgba(63, 63, 70, 0.6)')};
|
||||
.step-header .goBack:active {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
|
||||
}
|
||||
|
||||
.step .goBack span {
|
||||
.step-header .goBack span {
|
||||
transition: transform 0.2s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.step .goBack:hover span {
|
||||
.step-header .goBack:hover span {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.step .title {
|
||||
.step-header .stepCounter {
|
||||
color: var(--dees-color-text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.step-body .title {
|
||||
text-align: center;
|
||||
padding-top: 64px;
|
||||
padding-top: 32px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
@@ -170,35 +238,53 @@ export class DeesStepper extends DeesElement {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.step .content {
|
||||
.step-body .content {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.step-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<div class="stepperContainer">
|
||||
${this.steps.map(
|
||||
(stepArg) =>
|
||||
html`<div
|
||||
class="step ${stepArg === this.selectedStep
|
||||
? 'selected'
|
||||
: null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
|
||||
? 'hiddenStep'
|
||||
: ''} ${this.getIndexOfStep(stepArg) === 0 ? 'entrance' : ''}"
|
||||
>
|
||||
${this.getIndexOfStep(stepArg) > 0
|
||||
? html`<div class="goBack" @click=${this.goBack}><span style="font-family: Inter"><-</span> go to previous step</div>`
|
||||
: ``}
|
||||
<div
|
||||
class="stepperContainer ${this.overlay ? 'overlay' : ''}"
|
||||
style=${this.overlay ? `z-index: ${this.stepperZIndex};` : ''}
|
||||
>
|
||||
${this.steps.map((stepArg, stepIndex) => {
|
||||
const isSelected = stepArg === this.selectedStep;
|
||||
const isHidden =
|
||||
this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep);
|
||||
const isFirst = stepIndex === 0;
|
||||
return html`<dees-tile
|
||||
class="step ${isSelected ? 'selected' : ''} ${isHidden ? 'hiddenStep' : ''} ${isFirst ? 'entrance' : ''}"
|
||||
>
|
||||
<div slot="header" class="step-header">
|
||||
${!isFirst
|
||||
? html`<div class="goBack" @click=${this.goBack}>
|
||||
<span style="font-family: Inter"><-</span> go to previous step
|
||||
</div>`
|
||||
: html`<div class="goBack-spacer"></div>`}
|
||||
<div class="stepCounter">
|
||||
Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
|
||||
${this.steps.length}
|
||||
Step ${stepIndex + 1} of ${this.steps.length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-body">
|
||||
<div class="title">${stepArg.title}</div>
|
||||
<div class="content">${stepArg.content}</div>
|
||||
</div> `
|
||||
)}
|
||||
</div>
|
||||
${stepArg.footerContent
|
||||
? html`<div slot="footer" class="step-footer">${stepArg.footerContent}</div>`
|
||||
: ''}
|
||||
</dees-tile>`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -296,4 +382,20 @@ export class DeesStepper extends DeesElement {
|
||||
nextStep.validationFuncCalled = false;
|
||||
this.selectedStep = nextStep;
|
||||
}
|
||||
|
||||
public async destroy() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
const container = this.shadowRoot!.querySelector('.stepperContainer');
|
||||
container?.classList.add('predestroy');
|
||||
await domtools.convenience.smartdelay.delayFor(200);
|
||||
if (this.parentElement) {
|
||||
this.parentElement.removeChild(this);
|
||||
}
|
||||
if (this.windowLayer) {
|
||||
await this.windowLayer.destroy();
|
||||
}
|
||||
|
||||
// Unregister from z-index registry
|
||||
zIndexRegistry.unregister(this);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user