Skip to content

Commit e6e59c4

Browse files
committed
Removed material icon dependecy, already injected in component
1 parent 4bdc263 commit e6e59c4

File tree

4 files changed

+37
-23
lines changed

4 files changed

+37
-23
lines changed

README.md

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
# Stepper
22

3-
<p align="center">
4-
<img src="" />
5-
</p>
6-
73
Stepper for Vue.
84

9-
A simple stepper with simple actions such as next, back and end to perform simple forms.
5+
A simple stepper with simple actions such as next, back and finish to perform simple forms.
106

117
<a href="https://pygmyslowloris.github.io/vue-stepper/"> Live Demo</a>
128

@@ -16,14 +12,6 @@ A simple stepper with simple actions such as next, back and end to perform simpl
1612
npm install vue-stepper --save
1713
```
1814

19-
## Dependencies
20-
21-
Include the following stylesheet on your document's head
22-
23-
```
24-
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
25-
```
26-
2715
## Properties
2816

2917
| Properties | Type | Values |

dist/build.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/build.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/HorizontalStepper.vue

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
mode="out-in"
2626
>
2727
<keep-alive>
28-
<component :is="steps[currentStep.index].component" :clickedNext="nextButton[currentStep.name]" @can-continue="proceed"></component>
28+
<component :is="steps[currentStep.index].component" :clickedNext="nextButton[currentStep.name]"
29+
@can-continue="proceed"></component>
2930
</keep-alive>
3031
</transition>
3132
</div>
@@ -111,28 +112,28 @@
111112
}
112113
},
113114
activateStep(index, back = false) {
114-
if(this.steps[index]) {
115+
if (this.steps[index]) {
115116
this.previousStep = this.currentStep;
116117
this.currentStep = {
117118
name: this.steps[index].name,
118119
index: index
119120
};
120121
121-
if(index + 1 === this.steps.length) {
122+
if (index + 1 === this.steps.length) {
122123
this.finalStep = true;
123124
} else {
124125
this.finalStep = false;
125126
}
126127
127-
if(!back) {
128+
if (!back) {
128129
this.$emit('completed-step', this.previousStep);
129130
}
130131
}
131132
this.$emit('active-step', this.currentStep);
132133
},
133134
nextStep() {
134135
if (this.canContinue) {
135-
if(this.finalStep) {
136+
if (this.finalStep) {
136137
this.$emit('stepper-finished', this.currentStep);
137138
}
138139
let currentIndex = this.currentStep.index + 1;
@@ -156,11 +157,36 @@
156157
created() {
157158
// Initiate stepper
158159
this.activateStep(0);
159-
this.steps.forEach( (step)=> {
160+
this.steps.forEach((step) => {
160161
this.nextButton[step.name] = false;
161162
});
162163
}
163164
}
164165
</script>
165166

166-
<style src="./HorizontalStepper.scss" scoped lang="scss"></style>
167+
<style src="./HorizontalStepper.scss" scoped lang="scss"></style>
168+
<style scoped>
169+
/* fallback */
170+
@font-face {
171+
font-family: 'Material Icons';
172+
font-style: normal;
173+
font-weight: 400;
174+
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
175+
}
176+
177+
.material-icons {
178+
font-family: 'Material Icons';
179+
font-weight: normal;
180+
font-style: normal;
181+
font-size: 24px;
182+
line-height: 1;
183+
letter-spacing: normal;
184+
text-transform: none;
185+
display: inline-block;
186+
white-space: nowrap;
187+
word-wrap: normal;
188+
direction: ltr;
189+
-webkit-font-feature-settings: 'liga';
190+
-webkit-font-smoothing: antialiased;
191+
}
192+
</style>

0 commit comments

Comments
 (0)