@scom/scom-stepper
Advanced tools
Comparing version
@@ -141,2 +141,3 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { | ||
this._finishCaption = ''; | ||
this._showNavButtons = true; | ||
this.tag = {}; | ||
@@ -149,4 +150,2 @@ } | ||
set activeStep(step) { | ||
if (this._activeStep === step) | ||
return; | ||
if (this.stepElms && this.stepElms.length) { | ||
@@ -168,10 +167,12 @@ const maxValue = Math.max(this._activeStep, step); | ||
this.state.activeStep = step; | ||
if (this.btnNext) { | ||
this.btnNext.visible = this.activeStep < this.steps.length; | ||
if (this.btnNext.visible) | ||
this.updateButtonText(); | ||
if (this.showNavButtons) { | ||
if (this.btnNext) { | ||
this.btnNext.visible = this.activeStep < this.steps.length; | ||
if (this.btnNext.visible) | ||
this.updateButtonText(); | ||
} | ||
if (this.btnPrev) { | ||
this.btnPrev.visible = this.activeStep > 0 && this.steps.length > 1; | ||
} | ||
} | ||
if (this.btnPrev) { | ||
this.btnPrev.visible = this.activeStep > 0 && this.steps.length > 1; | ||
} | ||
} | ||
@@ -194,2 +195,13 @@ get steps() { | ||
} | ||
get showNavButtons() { | ||
var _a; | ||
return (_a = this._showNavButtons) !== null && _a !== void 0 ? _a : true; | ||
} | ||
set showNavButtons(value) { | ||
this._showNavButtons = value !== null && value !== void 0 ? value : true; | ||
if (this.btnPrev) | ||
this.btnPrev.visible = value; | ||
if (this.btnNext) | ||
this.btnNext.visible = value; | ||
} | ||
get isFinalStep() { | ||
@@ -200,3 +212,5 @@ return this.activeStep === this.steps.length - 1; | ||
const finishCaption = this.isFinalStep && this.finishCaption; | ||
this.btnNext.caption = finishCaption || 'Next'; | ||
if (this.showNavButtons) { | ||
this.btnNext.caption = finishCaption || 'Next'; | ||
} | ||
} | ||
@@ -235,25 +249,42 @@ setTag(value) { | ||
} | ||
onNext() { | ||
async onNext() { | ||
if (this.onBeforeNext) { | ||
await this.onBeforeNext(this, this.activeStep + 1); | ||
} | ||
if (this.state.checkStep()) { | ||
if (this.isFinalStep) { | ||
if (this.onDone) | ||
this.onDone(this); | ||
try { | ||
this.btnNext.rightIcon.spin = true; | ||
this.btnNext.rightIcon.visible = true; | ||
if (this.onDone) | ||
await this.onDone(this); | ||
} | ||
catch (_a) { } | ||
this.btnNext.rightIcon.spin = false; | ||
this.btnNext.rightIcon.visible = false; | ||
} | ||
else { | ||
this._updateStep(this.activeStep + 1); | ||
if (this.activeStep > this.state.furthestStepIndex) { | ||
this.state.furthestStepIndex = this.activeStep; | ||
} | ||
this._updateIndexs(this.activeStep + 1); | ||
} | ||
} | ||
} | ||
onStepChanged(index) { | ||
async onStepChanged(index) { | ||
if (this.onBeforeNext && this.activeStep < index) { | ||
await this.onBeforeNext(this, index); | ||
} | ||
if (index > this.state.furthestStepIndex && !this.state.checkStep()) | ||
return; | ||
this._updateStep(index); | ||
this._updateIndexs(index); | ||
} | ||
_updateIndexs(step) { | ||
this._updateStep(step); | ||
if (this.activeStep > this.state.furthestStepIndex) { | ||
this.state.furthestStepIndex = this.activeStep; | ||
} | ||
} | ||
_updateStep(step) { | ||
const oldStep = this._activeStep; | ||
this.activeStep = step; | ||
if (this.onChanged) | ||
this.onChanged(this, this.activeStep); | ||
this.onChanged(this, oldStep); | ||
} | ||
@@ -281,7 +312,8 @@ renderDivider() { | ||
this.stepElms = []; | ||
const isStepIconPanelShown = steps.length > 1; | ||
steps.forEach((item, i) => { | ||
const divider = i > 0 ? this.renderDivider() : []; | ||
const step = (this.$render("i-vstack", { class: 'step' + (i == this.activeStep ? ' --active' : ''), position: "relative", padding: { left: '0.5rem', right: '0.5rem' }, stack: { grow: '1', shrink: '1', basis: '0%' }, horizontalAlignment: "center", gap: "1rem", onClick: () => this.onStepChanged(i) }, | ||
const step = (this.$render("i-vstack", { class: 'step', position: "relative", padding: { left: '0.5rem', right: '0.5rem' }, stack: { grow: '1', shrink: '1', basis: '0%' }, horizontalAlignment: "center", gap: "1rem", onClick: () => this.onStepChanged(i) }, | ||
divider, | ||
this.$render("i-panel", null, | ||
this.$render("i-panel", { visible: isStepIconPanelShown }, | ||
this.$render("i-hstack", { class: "step-icon", width: "2rem", height: "2rem", background: { color: Theme.action.disabled }, border: { radius: '50%' }, horizontalAlignment: "center", verticalAlignment: "center" }, this.renderIcon(item.icon, i))), | ||
@@ -293,2 +325,3 @@ this.$render("i-panel", { class: "text-center step-label-container", width: "100%" }, | ||
}); | ||
this.activeStep = this.state.activeStep; | ||
} | ||
@@ -300,2 +333,3 @@ init() { | ||
this.onChanged = this.getAttribute('onChanged', true) || this.onChanged; | ||
this.onBeforeNext = this.getAttribute('onBeforeNext', true) || this.onBeforeNext; | ||
this.onDone = this.getAttribute('onDone', true) || this.onDone; | ||
@@ -309,2 +343,3 @@ const steps = this.getAttribute('steps', true); | ||
this.finishCaption = this.getAttribute('finishCaption', true, ''); | ||
this.showNavButtons = this.getAttribute('showNavButtons', true, true); | ||
} | ||
@@ -311,0 +346,0 @@ render() { |
{ | ||
"name": "@scom/scom-stepper", | ||
"type": "widget", | ||
"version": "0.1.0", | ||
"version": "0.1.2", | ||
"dependencies": [ | ||
@@ -6,0 +6,0 @@ "@ijstech/components" |
{ | ||
"name": "@scom/scom-stepper", | ||
"version": "0.1.0", | ||
"version": "0.1.2", | ||
"main": "dist/index.js", | ||
@@ -5,0 +5,0 @@ "plugin": "dist", |
@@ -63,4 +63,6 @@ /// <amd-module name="@scom/scom-stepper/index.css.ts" /> | ||
finishCaption?: string; | ||
onChanged?: (target: Control, activeStep: number) => void; | ||
onDone?: (target: Control) => void; | ||
onChanged?: (target: Control, lastActiveStep: number) => void; | ||
onBeforeNext?: (target: Control, nextStep: number) => Promise<void>; | ||
onDone?: (target: Control) => Promise<void>; | ||
showNavButtons?: boolean; | ||
} | ||
@@ -82,5 +84,7 @@ global { | ||
private _finishCaption; | ||
private _showNavButtons; | ||
private state; | ||
onChanged: (target: Control, activeStep: number) => void; | ||
onDone: (target: Control) => void; | ||
onChanged: (target: Control, lastActiveStep: number) => void; | ||
onBeforeNext: (target: Control, nextStep: number) => Promise<void>; | ||
onDone: (target: Control) => Promise<void>; | ||
tag: any; | ||
@@ -93,2 +97,4 @@ get activeStep(): number; | ||
set finishCaption(value: string); | ||
get showNavButtons(): boolean; | ||
set showNavButtons(value: boolean); | ||
private get isFinalStep(); | ||
@@ -103,2 +109,3 @@ private updateButtonText; | ||
private onStepChanged; | ||
private _updateIndexs; | ||
private _updateStep; | ||
@@ -105,0 +112,0 @@ private renderDivider; |
Sorry, the diff of this file is not supported yet
2373711
0.14%1066
7.68%