design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-stepper): add footer menu actions with form-aware step validation

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-11 10:46:56 +00:00
parent 39a4bf0dd3
commit ea30cbd381
4 changed files with 223 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
ts_web/elements/00group-layout/dees-stepper/dees-stepper.demo.ts
View File

@@ -8,13 +8,11 @@ const demoSteps: IStep[] = [
<dees-form>
<dees-input-text key="email" label="Work Email" required></dees-input-text>
<dees-input-text key="password" label="Create Password" type="password" required></dees-input-text>
<dees-form-submit>Continue</dees-form-submit>
</dees-form>
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
},
menuOptions: [
{ name: 'Continue', action: async (stepper) => stepper!.goNext() },
],
},
{
title: 'Profile Details',
@@ -22,13 +20,11 @@ const demoSteps: IStep[] = [
<dees-form>
<dees-input-text key="firstName" label="First Name" required></dees-input-text>
<dees-input-text key="lastName" label="Last Name" required></dees-input-text>
<dees-form-submit>Continue</dees-form-submit>
</dees-form>
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
},
menuOptions: [
{ name: 'Continue', action: async (stepper) => stepper!.goNext() },
],
},
{
title: 'Contact Information',
@@ -36,13 +32,11 @@ const demoSteps: IStep[] = [
<dees-form>
<dees-input-phone key="phone" label="Mobile Number" required></dees-input-phone>
<dees-input-text key="company" label="Company"></dees-input-text>
<dees-form-submit>Continue</dees-form-submit>
</dees-form>
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
},
menuOptions: [
{ name: 'Continue', action: async (stepper) => stepper!.goNext() },
],
},
{
title: 'Team Size',
@@ -59,13 +53,11 @@ const demoSteps: IStep[] = [
]}
required
></dees-input-dropdown>
<dees-form-submit>Continue</dees-form-submit>
</dees-form>
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
},
menuOptions: [
{ name: 'Continue', action: async (stepper) => stepper!.goNext() },
],
},
{
title: 'Goals',
@@ -81,13 +73,11 @@ const demoSteps: IStep[] = [
]}
required
></dees-input-multitoggle>
<dees-form-submit>Continue</dees-form-submit>
</dees-form>
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
},
menuOptions: [
{ name: 'Continue', action: async (stepper) => stepper!.goNext() },
],
},
{
title: 'Brand Preferences',
@@ -95,13 +85,11 @@ const demoSteps: IStep[] = [
<dees-form>
<dees-input-text key="brandColor" label="Primary brand color"></dees-input-text>
<dees-input-text key="tone" label="Preferred tone (e.g. friendly, formal)"></dees-input-text>
<dees-form-submit>Continue</dees-form-submit>
</dees-form>
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
},
menuOptions: [
{ name: 'Continue', action: async (stepper) => stepper!.goNext() },
],
},
{
title: 'Integrations',
@@ -112,13 +100,11 @@ const demoSteps: IStep[] = [
label="Integrations in use"
placeholder="Add integration"
></dees-input-list>
<dees-form-submit>Continue</dees-form-submit>
</dees-form>
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm!.addEventListener('formData', () => stepperArg.goNext(), { once: true });
},
menuOptions: [
{ name: 'Continue', action: async (stepper) => stepper!.goNext() },
],
},
{
title: 'Review & Launch',
@@ -127,6 +113,9 @@ const demoSteps: IStep[] = [
<p>Almost there! Review your selections and launch whenever you're ready.</p>
</dees-panel>
`,
menuOptions: [
{ name: 'Launch', action: async (stepper) => stepper!.goNext() },
],
},
];