@scom/scom-stepper - npm Package Compare versions

Comparing version 0.1.0 to 0.1.2

dist/index.js

@@ -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() {

dist/scconfig.json

 {
     "name": "@scom/scom-stepper",
     "type": "widget",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "dependencies": [
@@ -6,0 +6,0 @@ "@ijstech/components"

package.json

 {
   "name": "@scom/scom-stepper",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "plugin": "dist",

pluginTypes/index.d.ts

@@ -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;

No alert changes

Improved metrics

Total package byte prevSize

2373711

0.14%

Lines of code

1066

7.68%

No dependency changes