Skip to content

Commit 5447157

Browse files
shwilliamshwilliam
committed
allow disable styles and update styles
1 parent e7e6d58 commit 5447157

File tree

2 files changed

+113
-67
lines changed

2 files changed

+113
-67
lines changed

‎examples/example.vue

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
11
<template>
22
<div class="example">
3-
<VueLoadingButton class="button" @click.native="handleClick" :loading="isLoading" />
3+
<p>
4+
Click button to trigger loading simulation,
5+
click
6+
<button type="button" @click="isStyled = !isStyled">here</button>
7+
to
8+
{{
9+
isStyled ?
10+
'unstyle' :
11+
'style'
12+
}}
13+
</p>
14+
<VueLoadingButton
15+
aria-label="Post message"
16+
class="button"
17+
@click.native="handleClick"
18+
:loading="isLoading"
19+
:styled="isStyled"
20+
>Send</VueLoadingButton>
421
</div>
522
</template>
623

@@ -11,13 +28,15 @@ export default {
1128
data() {
1229
return {
1330
isLoading: false,
31+
isStyled: true
1432
};
1533
},
1634
methods: {
1735
handleClick() {
18-
console.log('click') /* eslint-disable-line */
19-
this.isLoading = !this.isLoading
20-
},
36+
console.log("click"); /* eslint-disable-line */
37+
this.isLoading = true;
38+
setTimeout(() => (this.isLoading = false), 1300);
39+
}
2140
},
2241
components: {
2342
VueLoadingButton
@@ -28,8 +47,10 @@ export default {
2847
<style scoped>
2948
.example {
3049
font-family: sans-serif;
50+
text-align: center;
3151
}
32-
.button {
52+
/* .button {
3353
background-color: coral;
34-
}
54+
border-radius: 3px;
55+
} */
3556
</style>

‎src/vue-loading-button.vue

Lines changed: 86 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
1-
<script>
2-
export default {
3-
name: "VueLoadingButton",
4-
props: {
5-
loading: {
6-
type: Boolean,
7-
required: false,
8-
default: false
9-
},
10-
}
11-
};
12-
</script>
13-
141
<template>
152
<button
163
:class="{
174
'vue-loading-button': true,
5+
'default-styles': styled,
186
'loading': loading,
197
}"
8+
:disabled="loading"
209
type="button"
2110
>
2211
<slot>Submit</slot>
@@ -29,77 +18,77 @@ export default {
2918
</button>
3019
</template>
3120

21+
<script>
22+
export default {
23+
name: "VueLoadingButton",
24+
props: {
25+
loading: {
26+
type: Boolean,
27+
required: false,
28+
default: false
29+
},
30+
styled: {
31+
type: Boolean,
32+
required: false,
33+
default: true
34+
}
35+
}
36+
};
37+
</script>
38+
3239
<style scoped>
3340
/* reset */
34-
.vue-loading-button {
41+
button {
3542
font-family: inherit;
3643
font-size: 100%;
44+
font-size: 1.4rem;
3745
line-height: 1.15;
3846
margin: 0;
3947
overflow: visible;
4048
text-transform: none;
4149
-webkit-appearance: button;
4250
}
43-
.vue-loading-button::-moz-focus-inner {
51+
button::-moz-focus-inner {
4452
border-style: none;
4553
padding: 0;
4654
}
47-
.vue-loading-button:-moz-focusring {
55+
button:-moz-focusring {
4856
outline: 1px dotted ButtonText;
4957
}
50-
/* styles */
51-
.vue-loading-button {
52-
color: white;
53-
background-color: blue;
54-
border: solid 1px transparent;
55-
border-radius: 4px;
56-
cursor: pointer;
57-
padding: 8px 16px;
58-
line-height: 1.9rem;
59-
font-size: 1.4rem;
58+
59+
/* loading styles */
60+
button {
6061
position: relative;
6162
-webkit-transition: all 0.2s;
6263
transition: all 0.2s;
6364
transition-timing-function: ease-in;
64-
overflow: hidden;
65-
}
66-
.vue-loading-button:focus {
67-
outline: none;
68-
box-shadow: 0 0 0 3px lightblue,
69-
0 0 0 1.5px lightblue;
70-
}
71-
.vue-loading-button:not(.loading) {
72-
transition-delay: 0.2s;
7365
}
7466
.spinner {
7567
line-height: 1.15;
7668
position: absolute;
7769
top: 50%;
7870
left: auto;
79-
right: 1.28em;
71+
right: 1.7rem;
8072
margin: -0.5em;
81-
-webkit-transition: all 0.2s;
82-
transition: all 0.2s;
83-
transition-timing-function: ease-in;
73+
opacity: 0;
74+
transition-property: padding, opacity;
75+
transition-duration: 0.2s, 0.2s;
76+
transition-timing-function: ease-in, ease;
77+
transition-delay: 0s, 0.2s;
8478
}
8579
.spinner span {
8680
box-sizing: border-box;
8781
display: inline-block;
8882
position: absolute;
8983
right: 0;
90-
width: 1.2rem;
91-
height: 1.2rem;
92-
opacity: 0;
93-
border: 3.4px solid #fff;
84+
top: 0.15rem;
85+
width: 1rem;
86+
height: 1rem;
87+
opacity: 1;
88+
border: 3.4px solid #888;
9489
border-radius: 50%;
9590
animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
96-
border-color: #fff transparent transparent transparent;
97-
-webkit-transition: opacity 0.2s;
98-
transition: opacity 0.2s;
99-
transition-timing-function: ease;
100-
}
101-
.spinner span {
102-
transition-delay: 0.2s;
91+
border-color: #888 transparent transparent transparent;
10392
}
10493
.spinner span:nth-child(1) {
10594
animation-delay: 0.45s;
@@ -110,22 +99,34 @@ export default {
11099
.spinner span:nth-child(3) {
111100
animation-delay: 0.15s;
112101
}
113-
.vue-loading-button:not(.loading) .spinner span {
114-
box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1);
115-
border: 10.4px solid #fff;
102+
.loading {
103+
padding-right: 3rem !important;
104+
}
105+
.loading .spinner {
106+
opacity: 1;
107+
}
108+
.loading .spinner span {
109+
opacity: 1;
110+
}
111+
button:not(:disabled) {
112+
transition-delay: 0.2s;
113+
}
114+
button:not(:disabled) .spinner span {
115+
box-shadow: 0 0 0 0.2rem #888 inset;
116+
border: 7.4px solid transparent;
116117
-webkit-transition: all 0.4s;
117118
transition: all 0.4s;
118119
}
119-
.vue-loading-button:not(.loading) .spinner span:nth-child(1) {
120+
button:not(:disabled) .spinner span:nth-child(1) {
120121
transform: rotate(0deg) !important;
121122
}
122-
.vue-loading-button:not(.loading) .spinner span:nth-child(2) {
123+
button:not(:disabled) .spinner span:nth-child(2) {
123124
transform: rotate(90deg) !important;
124125
}
125-
.vue-loading-button:not(.loading) .spinner span:nth-child(3) {
126+
button:not(:disabled) .spinner span:nth-child(3) {
126127
transform: rotate(180deg) !important;
127128
}
128-
.vue-loading-button:not(.loading) .spinner span:nth-child(4) {
129+
button:not(:disabled) .spinner span:nth-child(4) {
129130
transform: rotate(270deg) !important;
130131
}
131132
@keyframes spinner {
@@ -136,10 +137,34 @@ export default {
136137
transform: rotate(360deg);
137138
}
138139
}
139-
.loading {
140-
padding-right: 2.3em;
140+
141+
/* default styles */
142+
.default-styles {
143+
color: white;
144+
background-color: blue;
145+
border: solid 1px transparent;
146+
border-radius: 4px;
147+
cursor: pointer;
148+
padding: 8px 16.5px 8px 16px;
149+
line-height: 1.9rem;
141150
}
142-
.loading .spinner span {
143-
opacity: 1;
151+
.default-styles:disabled {
152+
pointer-events: stroke;
153+
cursor: not-allowed;
154+
}
155+
.default-styles:focus {
156+
outline: none;
157+
box-shadow: 0 0 0 3px lightblue, 0 0 0 1.5px lightblue;
158+
}
159+
.default-styles .spinner span {
160+
top: 0rem;
161+
width: 1.2rem;
162+
height: 1.2rem;
163+
border: 3.4px solid #fff;
164+
border-color: #fff transparent transparent transparent;
165+
}
166+
.default-styles:not(:disabled) .spinner span {
167+
border: 8.4px solid transparent;
168+
box-shadow: 0 0 0 0.1rem #fff inset;
144169
}
145170
</style>

0 commit comments

Comments
 (0)