You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@scom/scom-stepper

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@scom/scom-stepper - npm Package Compare versions

Comparing version

to
0.1.2

79

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

{
"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