Skip to content

Commit 4bdc263

Browse files
hazzohazzo
committed
Added README and translations
1 parent 474fd66 commit 4bdc263

File tree

5 files changed

+233
-5
lines changed

5 files changed

+233
-5
lines changed

‎README.md

Lines changed: 206 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,214 @@ Include the following stylesheet on your document's head
2626

2727
## Properties
2828

29+
| Properties | Type | Values |
30+
| :--------------- | :------- | :--------- |
31+
| `steps` | Array of Objects | Each object is a step that will be included in the stepper |
32+
| `locale` | String | Default: `en`. Current options: `en`, `es`. |
2933

30-
## Events
3134

35+
### Steps object properties
3236

37+
| Properties | Type | Values |
38+
| :--------------- | :------- | :--------- |
39+
| `icon` | String | Ex.: `mail`. Name of icons that belong to material-icons library |
40+
| `name` | String | Name of the step. Each step name **MUST** be unique |
41+
| `title` | String | Title that will be displayed below the step, on bold. |
42+
| `subtitle` | String | Subtitle displayed below the title. |
43+
| `component` | Component | Imported component that will be show on the content area of the step. |
44+
| `completed` | Boolean | If step is completed or not. If `TRUE` a `done` material icon will replace the one given before. Only mark as completed when you want to let know the user that the previous step has been completed |
45+
46+
47+
## Events emitted by stepper
48+
49+
| Event name | When |
50+
| :--------------- | :------- |
51+
| `completed-step` | Triggered when a step is completed. Completed meaning that current step has been left behind on the step list. Now you can mark your step object as completed if you desire it.|
52+
| `active-step` | Current active step. It's `name` and `index` are exposed on the deployed payload.|
53+
| `stepper-finished` | Event emitted when the user clicks the final button. Now it's time to execute a final callback method|
54+
| `clicking-back` | Triggered when user clicks the back button to return to a previous step|
55+
56+
## Events that can be emitted by content component
57+
58+
| Event name | When |
59+
| :--------------- | :------- |
60+
| `can-continue` | By default the *next button* will be disabled until the event `can-continue` is triggered with an object containing the property `value`. `Value` accepts a boolean, if `true` next/finish button will be enabled if false disabled.|
3361

3462
## Examples
63+
64+
Template example
65+
66+
```html
67+
68+
<section class="section">
69+
<div class="container">
70+
<div class="columns">
71+
<div class="column is-8 is-offset-2">
72+
<horizontal-stepper :steps="demoSteps" @completed-step="completeStep"
73+
@active-step="isStepActive" @stepper-finished="alert"
74+
>
75+
</horizontal-stepper>
76+
</div>
77+
</div>
78+
</div>
79+
</section>
80+
81+
```
82+
83+
Script example
84+
85+
```javascript
86+
87+
import HorizontalStepper from 'vue-stepper';
88+
89+
// This components will have the content for each stepper step.
90+
import StepOne from './StepOne.vue';
91+
import StepTwo from './StepTwo.vue';
92+
93+
export default {
94+
components: {
95+
HorizontalStepper
96+
},
97+
data(){
98+
return {
99+
demoSteps: [
100+
{
101+
icon: 'mail',
102+
name: 'first',
103+
title: 'Sample title 1',
104+
subtitle: 'Subtitle sample',
105+
component: StepOne,
106+
completed: false
107+
108+
},
109+
{
110+
icon: 'report_problem',
111+
name: 'second',
112+
title: 'Sample title 2',
113+
subtitle: 'Subtitle sample',
114+
component: StepTwo,
115+
completed: false
116+
}
117+
]
118+
}
119+
},
120+
methods: {
121+
// Executed when @completed-step event is triggered
122+
completeStep(payload) {
123+
this.demoSteps.forEach((step) => {
124+
if (step.name === payload.name) {
125+
step.completed = true;
126+
}
127+
})
128+
},
129+
// Executed when @active-step event is triggered
130+
isStepActive(payload) {
131+
this.demoSteps.forEach((step) => {
132+
if (step.name === payload.name) {
133+
if(step.completed === true) {
134+
step.completed = false;
135+
}
136+
}
137+
})
138+
},
139+
// Executed when @stepper-finished event is triggered
140+
alert(payload) {
141+
alert('end')
142+
}
143+
}
144+
}
145+
146+
```
147+
148+
Example of component content that will be displayed on the first step (*vuelidate* used to validate form).
149+
150+
**Template**
151+
152+
```html
153+
154+
<div style="padding: 2rem 3rem; text-align: left;">
155+
<div class="field">
156+
<label class="label">Username</label>
157+
<div class="control">
158+
<input :class="['input', ($v.form.username.$error) ? 'is-danger' : '']" type="text" placeholder="Text input"
159+
v-model="form.username">
160+
</div>
161+
<p v-if="$v.form.username.$error" class="help is-danger">This username is invalid</p>
162+
</div>
163+
<div class="field">
164+
<label class="label">Email</label>
165+
<div class="control">
166+
<input :class="['input', ($v.form.demoEmail.$error) ? 'is-danger' : '']" type="text" placeholder="Email input" v-model="form.demoEmail">
167+
</div>
168+
<p v-if="$v.form.demoEmail.$error" class="help is-danger">This email is invalid</p>
169+
</div>
170+
<div class="field">
171+
<label class="label">Message</label>
172+
<div class="control">
173+
<textarea :class="['textarea', ($v.form.message.$error) ? 'is-danger' : '']" placeholder="Textarea" v-model="form.message"></textarea>
174+
</div>
175+
</div>
176+
</div>
177+
178+
```
179+
180+
**Javascript**
181+
182+
```javascript
183+
184+
import {validationMixin} from 'vuelidate'
185+
import {required, email} from 'vuelidate/lib/validators'
186+
187+
export default {
188+
props: ['clickedNext'],
189+
mixins: [validationMixin],
190+
data() {
191+
return {
192+
form: {
193+
username: '',
194+
demoEmail: '',
195+
message: ''
196+
}
197+
}
198+
},
199+
validations: {
200+
form: {
201+
username: {
202+
required
203+
},
204+
demoEmail: {
205+
required,
206+
email
207+
},
208+
message: {
209+
required
210+
}
211+
}
212+
},
213+
watch: {
214+
$v: {
215+
handler: function (val) {
216+
if(!val.$invalid) {
217+
this.$emit('can-continue', {value: true});
218+
} else {
219+
this.$emit('can-continue', {value: false});
220+
}
221+
},
222+
deep: true
223+
},
224+
clickedNext(val) {
225+
if(val === true) {
226+
this.$v.form.$touch();
227+
}
228+
}
229+
},
230+
mounted() {
231+
if(!this.$v.$invalid) {
232+
this.$emit('can-continue', {value: true});
233+
} else {
234+
this.$emit('can-continue', {value: false});
235+
}
236+
}
237+
}
238+
239+
```

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-stepper",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "Vue Stepper",
55
"main": "src/index.js",
66
"repository": {

‎src/HorizontalStepper.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
}
7878
}
7979
.circle {
80-
margin-bottom: .5rem;
80+
margin-bottom: 1rem;
8181
i {
8282
background-color: #3383c8;
8383
color: #fff;

‎src/HorizontalStepper.vue

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,30 @@
3232
<div :class="['bottom', (currentStep.index > 0) ? '' : 'only-next']">
3333
<div v-if="currentStep.index > 0" class="stepper-button previous" @click="backStep()">
3434
<i class="material-icons">keyboard_arrow_left</i>
35-
<span>Atrás</span>
35+
<span>{{ back | translate(locale) }}</span>
3636
</div>
3737
<div :class="['stepper-button next', !canContinue ? 'deactivated' : '']" @click="nextStep()">
38-
<span>{{ (finalStep) ? 'Finalizar' : 'Siguiente' }}</span>
38+
<span>{{ (finalStep) ? 'finish' : 'next' | translate(locale) }}</span>
3939
<i class="material-icons">keyboard_arrow_right</i>
4040
</div>
4141
</div>
4242
</div>
4343
</template>
4444

4545
<script>
46+
import translations from './Translations.js'
47+
4648
export default {
49+
filters: {
50+
translate: function (value, locale) {
51+
return translations[locale][value];
52+
}
53+
},
4754
props: {
55+
locale: {
56+
type: String,
57+
default: 'en'
58+
},
4859
steps: {
4960
type: Array,
5061
default: function () {

‎src/Translations.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default {
2+
en: {
3+
next: 'Next',
4+
back: 'Back',
5+
finish: 'Finish'
6+
},
7+
es: {
8+
next: 'Siguiente',
9+
back: 'Atrás',
10+
finish: 'Finalizar'
11+
}
12+
}

0 commit comments

Comments
 (0)