Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-simple-stepper
Advanced tools
Readme
Stepper component designed to guide users through a multi-step process, like a registration form or setup process. It provides a clear indication of the current, completed, and upcoming steps, and also allows for navigating between these steps.
steps
prop.Install it from npm
npm install vue-simple-stepper
You need to import the component doing:
import VueSimpleStepper from 'vue-simple-stepper'
And its styles like this:
import "vue-simple-stepper/dist/style.css";
The easiest way to use is to copy and throw this in your code:
<template>
<vue-simple-stepper
:steps="state.steps"
:step="state.step"
@click:next="nextStep"
@click:previous="previousStep"
@click:submit="submitStep"
>
<div class="content first">asdfasd</div>
<div class="content second">asdfasd</div>
<div class="content third">asdfasd</div>
</vue-simple-stepper>
</template>
<script setup>
import { reactive } from "vue";
import "vue-simple-stepper/dist/style.css";
import VueSimpleStepper from "vue-simple-stepper";
const state = reactive({
steps: ["Step 1", "Step 2", "Step 3"],
step: 1,
});
const nextStep = () => {
state.step++;
};
const previousStep = () => {
state.step--;
};
const submitStep = () => {
console.log("Step submitted");
};
</script>
Any element found in the default slot of the component will be automatically added to the stepper. Notice that the steps data prop number coincides with the number of elements in the stepper.
You can set a default starting point of the component with the step prop. With it you can also control the stepper programmatically.
Any time the actions of the stepper are clicked the events:
One common problem is the customization of the stepper to fit the framework or styles of choice. In that case you can do it by using the CSS variables:
:root {
--vue-simple-stepper-primary-color: #c724f0;
--vue-simple-stepper-primary-color-contrast: white;
--vue-simple-stepper-button-hover-color: #b11dd6;
--vue-simple-stepper-secondary-color: #d8ceda;
--vue-simple-stepper-secondary-color-contrast: black;
--vue-simple-stepper-divider-color: var(--vue-simple-stepper-primary-color);
--vue-simple-stepper-divider-color-neutral: var(
--vue-simple-stepper-secondary-color
);
}
Or in case you want to further customize the buttons you can overwrite or extend these classes:
.vue-simple-stepper-button {
border-radius: 8px;
padding: 0.6em 1.2em;
border: 0;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: var(--vue-simple-stepper-primary-color);
cursor: pointer;
transition: border-color 0.25s;
}
.vue-simple-stepper-button:hover {
background-color: var(--vue-simple-stepper-button-hover-color);
}
.vue-simple-stepper-button--outlined {
border: 1px solid var(--vue-simple-stepper-primary-color);
color: black;
background-color: transparent;
}
.vue-simple-stepper-button--outlined:hover {
background-color: transparent;
border-color: var(--vue-simple-stepper-button-hover-color);
}
.vue-simple-stepper-button:focus,
.vue-simple-stepper-button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
In case that you need to overwrite completely the action buttons do it by using the actions
slot like so:
<template>
<vue-simple-stepper
:steps="state.steps"
:step="state.step"
@click:next="nextStep"
@click:previous="previousStep"
@click:submit="submitStep"
>
<div class="content first">asdfasd</div>
<div class="content second">asdfasd</div>
<div class="content third">asdfasd</div>
<template
#actions="{
clickNext,
clickPrevious,
clickSubmit,
isFirstStep,
isLastStep,
}"
>
<div>
<button @click="clickPrevious" v-if="!isFirstStep">Previous</button>
<button @click="clickNext" v-if="!isLastStep">Next</button>
<button @click="clickSubmit" v-if="isLastStep">Submit</button>
</div>
</template>
</vue-simple-stepper>
</template>
<script setup>
import { reactive } from "vue";
import "vue-simple-stepper/dist/style.css";
import VueSimpleStepper from "vue-simple-stepper";
const state = reactive({
steps: ["Step 1", "Step 2", "Step 3"],
step: 1,
});
const nextStep = () => {
state.step++;
};
const previousStep = () => {
state.step--;
};
const submitStep = () => {
console.log("Step submitted");
};
</script>
steps
: An array that defines the steps in the stepper. The length of the array determines the number of steps. Default is an empty array.step
: A number indicating the current step. Starts from 1 and default is 1.click:next
: Triggered when the next button is clicked.click:previous
: Triggered when the previous button is clicked.click:submit
: Triggered when the submit button is clicked.actions
: For customizing the action buttons (next, previous, submit) of the stepper.FAQs
Stepper component designed to guide users through a multi-step process, like a registration form or setup process. It provides a clear indication of the current, completed, and upcoming steps, and also allows for navigating between these steps.
The npm package vue-simple-stepper receives a total of 1 weekly downloads. As such, vue-simple-stepper popularity was classified as not popular.
We found that vue-simple-stepper demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.