@vue-interface/btn-activity 2.0.0-beta.1 → 2.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/btn-activity.css +1 -1
- package/dist/btn-activity.es.js +78 -188
- package/dist/btn-activity.umd.js +1 -14
- package/{index.js → dist/index.d.ts} +1 -4
- package/dist/src/BtnActivity.vue.d.ts +234 -0
- package/package.json +13 -4
- package/src/BtnActivity.vue +262 -277
package/src/BtnActivity.vue
CHANGED
|
@@ -1,286 +1,271 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
import { ActivityIndicator } from '@vue-interface/activity-indicator';
|
|
18
|
-
import { Btn } from '@vue-interface/btn';
|
|
19
|
-
|
|
20
|
-
const convertAnimationDelayToInt = function(delay) {
|
|
21
|
-
const num = parseFloat(delay || 0, 10);
|
|
22
|
-
const matches = delay && delay.match(/m?s/);
|
|
23
|
-
const unit = matches ? matches[0] : false;
|
|
24
|
-
|
|
25
|
-
let milliseconds;
|
|
26
|
-
|
|
27
|
-
switch (unit) {
|
|
28
|
-
case 's': // seconds
|
|
29
|
-
milliseconds = num * 1000;
|
|
30
|
-
break;
|
|
31
|
-
case 'ms':
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { ActivityIndicator } from "@vue-interface/activity-indicator";
|
|
3
|
+
import { Btn } from "@vue-interface/btn";
|
|
4
|
+
|
|
5
|
+
const convertAnimationDelayToInt = function (delay: any) {
|
|
6
|
+
const num = parseFloat(delay || 0);
|
|
7
|
+
const matches = delay && delay.match(/m?s/);
|
|
8
|
+
const unit = matches ? matches[0] : false;
|
|
9
|
+
|
|
10
|
+
let milliseconds;
|
|
11
|
+
|
|
12
|
+
switch (unit) {
|
|
13
|
+
case "s": // seconds
|
|
14
|
+
milliseconds = num * 1000;
|
|
15
|
+
break;
|
|
16
|
+
case "ms":
|
|
32
17
|
default:
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
18
|
+
milliseconds = num;
|
|
19
|
+
break;
|
|
20
|
+
}
|
|
36
21
|
|
|
37
|
-
|
|
22
|
+
return milliseconds || 0;
|
|
38
23
|
};
|
|
39
24
|
|
|
40
|
-
const animated = function(el, callback) {
|
|
41
|
-
|
|
25
|
+
const animated = function (el: HTMLElement, callback: Function) {
|
|
26
|
+
const defaultView = (el.ownerDocument || document).defaultView;
|
|
42
27
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
28
|
+
setTimeout(
|
|
29
|
+
callback,
|
|
30
|
+
convertAnimationDelayToInt(defaultView?.getComputedStyle(el).animationDuration)
|
|
31
|
+
);
|
|
46
32
|
};
|
|
47
33
|
|
|
48
34
|
export default {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
35
|
+
name: "BtnActivity",
|
|
36
|
+
|
|
37
|
+
components: {
|
|
38
|
+
ActivityIndicator,
|
|
39
|
+
Btn,
|
|
40
|
+
},
|
|
41
|
+
|
|
42
|
+
props: {
|
|
43
|
+
/**
|
|
44
|
+
* Make the button appear with the active state.
|
|
45
|
+
*
|
|
46
|
+
* @property {Boolean}
|
|
47
|
+
*/
|
|
48
|
+
active: Boolean,
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Show the activity indicator inside the button.
|
|
52
|
+
*
|
|
53
|
+
* @property {Boolean}
|
|
54
|
+
*/
|
|
55
|
+
activity: Boolean,
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Display the button as block width.
|
|
59
|
+
*
|
|
60
|
+
* @property {Boolean}
|
|
61
|
+
*/
|
|
62
|
+
block: Boolean,
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Disable the button.
|
|
66
|
+
*
|
|
67
|
+
* @property {Boolean}
|
|
68
|
+
*/
|
|
69
|
+
disabled: Boolean,
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* The type of activity indicator inside the button.
|
|
73
|
+
*
|
|
74
|
+
* @property {String}
|
|
75
|
+
*/
|
|
76
|
+
indicator: {
|
|
77
|
+
type: [Object, String],
|
|
78
|
+
default: "spinner",
|
|
55
79
|
},
|
|
56
80
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Display the button as block width.
|
|
75
|
-
*
|
|
76
|
-
* @property {Boolean}
|
|
77
|
-
*/
|
|
78
|
-
block: Boolean,
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Disable the button.
|
|
82
|
-
*
|
|
83
|
-
* @property {Boolean}
|
|
84
|
-
*/
|
|
85
|
-
disabled: Boolean,
|
|
86
|
-
|
|
87
|
-
/**
|
|
88
|
-
* The type of activity indicator inside the button.
|
|
89
|
-
*
|
|
90
|
-
* @property {String}
|
|
91
|
-
*/
|
|
92
|
-
indicator: {
|
|
93
|
-
type: [Object, String],
|
|
94
|
-
default: 'spinner'
|
|
95
|
-
},
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* The button label.
|
|
99
|
-
*
|
|
100
|
-
* @property {String}
|
|
101
|
-
*/
|
|
102
|
-
label: String,
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* The orientation of the activity button inside the button.
|
|
106
|
-
*
|
|
107
|
-
* @property {String}
|
|
108
|
-
*/
|
|
109
|
-
orientation: {
|
|
110
|
-
type: String,
|
|
111
|
-
default: 'right'
|
|
112
|
-
},
|
|
81
|
+
/**
|
|
82
|
+
* The button label.
|
|
83
|
+
*
|
|
84
|
+
* @property {String}
|
|
85
|
+
*/
|
|
86
|
+
label: String,
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* The orientation of the activity button inside the button.
|
|
90
|
+
*
|
|
91
|
+
* @property {String}
|
|
92
|
+
*/
|
|
93
|
+
orientation: {
|
|
94
|
+
type: String,
|
|
95
|
+
default: "right",
|
|
96
|
+
},
|
|
113
97
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
98
|
+
/**
|
|
99
|
+
* The size of the button.
|
|
100
|
+
*
|
|
101
|
+
* @property {String}
|
|
102
|
+
*/
|
|
103
|
+
size: {
|
|
104
|
+
type: String,
|
|
105
|
+
default: "md",
|
|
106
|
+
},
|
|
123
107
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
108
|
+
/**
|
|
109
|
+
* The HTML tag.
|
|
110
|
+
*
|
|
111
|
+
* @property {String}
|
|
112
|
+
*/
|
|
113
|
+
tag: String,
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* The variant of the button.
|
|
117
|
+
*
|
|
118
|
+
* @property {String}
|
|
119
|
+
*/
|
|
120
|
+
variant: {
|
|
121
|
+
type: String,
|
|
122
|
+
default: "primary",
|
|
140
123
|
},
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
124
|
+
},
|
|
125
|
+
|
|
126
|
+
data() {
|
|
127
|
+
return {
|
|
128
|
+
currentActivity: this.activity,
|
|
129
|
+
};
|
|
130
|
+
},
|
|
131
|
+
|
|
132
|
+
computed: {
|
|
133
|
+
/**
|
|
134
|
+
* An object of classes to append to the button.
|
|
135
|
+
*
|
|
136
|
+
* @return void
|
|
137
|
+
*/
|
|
138
|
+
classes() {
|
|
139
|
+
return {
|
|
140
|
+
disabled: this.disabled,
|
|
141
|
+
active: this.active,
|
|
142
|
+
"btn-activity": this.activity,
|
|
143
|
+
[`btn-activity-${this.orientation.replace("btn-activity-", "")}`]: !!this
|
|
144
|
+
.orientation,
|
|
145
|
+
[`'btn-activity-indicator-${this.indicatorProps.type.replace(
|
|
146
|
+
"btn-activity-indicator-",
|
|
147
|
+
""
|
|
148
|
+
)}`]: !!this.indicatorProps.type,
|
|
149
|
+
};
|
|
146
150
|
},
|
|
147
151
|
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
*
|
|
153
|
-
* @return void
|
|
154
|
-
*/
|
|
155
|
-
classes() {
|
|
156
|
-
const classes = {
|
|
157
|
-
'disabled': this.disabled,
|
|
158
|
-
'active': this.active,
|
|
159
|
-
'btn-activity': this.activity
|
|
160
|
-
};
|
|
161
|
-
|
|
162
|
-
classes['btn-activity-' + this.orientation.replace('btn-activity-', '')] = !!this.orientation;
|
|
163
|
-
classes['btn-activity-indicator-' + this.indicatorProps.type.replace('btn-activity-indicator-', '')] = !!this.indicatorProps.type;
|
|
164
|
-
|
|
165
|
-
return classes;
|
|
152
|
+
indicatorProps() {
|
|
153
|
+
return Object.assign(
|
|
154
|
+
{
|
|
155
|
+
type: "spinner",
|
|
166
156
|
},
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
type: 'spinner'
|
|
171
|
-
}, (typeof this.indicator === 'string' ? {
|
|
172
|
-
type: this.indicator
|
|
173
|
-
} : this.indicator) || {});
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
},
|
|
177
|
-
|
|
178
|
-
watch: {
|
|
179
|
-
|
|
180
|
-
activity(value) {
|
|
181
|
-
if(value) {
|
|
182
|
-
this.showActivity();
|
|
183
|
-
}
|
|
184
|
-
else {
|
|
185
|
-
this.hideActivity();
|
|
157
|
+
(typeof this.indicator === "string"
|
|
158
|
+
? {
|
|
159
|
+
type: this.indicator,
|
|
186
160
|
}
|
|
187
|
-
|
|
188
|
-
|
|
161
|
+
: this.indicator) || {}
|
|
162
|
+
);
|
|
189
163
|
},
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
164
|
+
},
|
|
165
|
+
|
|
166
|
+
watch: {
|
|
167
|
+
activity(value: boolean) {
|
|
168
|
+
if (value) {
|
|
169
|
+
this.showActivity();
|
|
170
|
+
} else {
|
|
171
|
+
this.hideActivity();
|
|
172
|
+
}
|
|
195
173
|
},
|
|
174
|
+
},
|
|
196
175
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
*/
|
|
214
|
-
enable() {
|
|
215
|
-
this.$el.disabled = false;
|
|
216
|
-
this.$el.classList.remove('disabled');
|
|
217
|
-
},
|
|
218
|
-
|
|
219
|
-
/**
|
|
220
|
-
* Hide the activity indicator inside the button.
|
|
221
|
-
*
|
|
222
|
-
* @return void
|
|
223
|
-
*/
|
|
224
|
-
hideActivity() {
|
|
225
|
-
this.$el.classList.add('btn-hide-activity');
|
|
226
|
-
|
|
227
|
-
animated(this.$el, () => {
|
|
228
|
-
this.enable();
|
|
229
|
-
this.currentActivity = false;
|
|
230
|
-
this.$el.classList.remove('btn-activity', 'btn-hide-activity');
|
|
231
|
-
this.$emit('hide-activity');
|
|
232
|
-
});
|
|
233
|
-
},
|
|
176
|
+
mounted() {
|
|
177
|
+
if (this.activity) {
|
|
178
|
+
this.showActivity();
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
|
|
182
|
+
methods: {
|
|
183
|
+
/**
|
|
184
|
+
* Disable the button.
|
|
185
|
+
*
|
|
186
|
+
* @return void
|
|
187
|
+
*/
|
|
188
|
+
disable() {
|
|
189
|
+
this.$el.disabled = true;
|
|
190
|
+
this.$el.classList.add("disabled");
|
|
191
|
+
},
|
|
234
192
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
animated(this.$el, () => {
|
|
245
|
-
this.$el.classList.add('btn-activity');
|
|
246
|
-
this.$emit('show-activity');
|
|
247
|
-
});
|
|
248
|
-
},
|
|
193
|
+
/**
|
|
194
|
+
* Enable the button.
|
|
195
|
+
*
|
|
196
|
+
* @return void
|
|
197
|
+
*/
|
|
198
|
+
enable() {
|
|
199
|
+
this.$el.disabled = false;
|
|
200
|
+
this.$el.classList.remove("disabled");
|
|
201
|
+
},
|
|
249
202
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
203
|
+
/**
|
|
204
|
+
* Hide the activity indicator inside the button.
|
|
205
|
+
*
|
|
206
|
+
* @return void
|
|
207
|
+
*/
|
|
208
|
+
hideActivity() {
|
|
209
|
+
this.$el.classList.add("btn-hide-activity");
|
|
210
|
+
|
|
211
|
+
animated(this.$el, () => {
|
|
212
|
+
this.enable();
|
|
213
|
+
this.currentActivity = false;
|
|
214
|
+
this.$el.classList.remove("btn-activity", "btn-hide-activity");
|
|
215
|
+
this.$emit("hide-activity");
|
|
216
|
+
});
|
|
217
|
+
},
|
|
263
218
|
|
|
264
|
-
|
|
219
|
+
/**
|
|
220
|
+
* Show the activity indicator inside the button.
|
|
221
|
+
*
|
|
222
|
+
* @return void
|
|
223
|
+
*/
|
|
224
|
+
showActivity() {
|
|
225
|
+
this.currentActivity = true;
|
|
226
|
+
this.disable();
|
|
227
|
+
|
|
228
|
+
animated(this.$el, () => {
|
|
229
|
+
this.$el.classList.add("btn-activity");
|
|
230
|
+
this.$emit("show-activity");
|
|
231
|
+
});
|
|
232
|
+
},
|
|
265
233
|
|
|
234
|
+
/**
|
|
235
|
+
* Show the activity indicator inside the button.
|
|
236
|
+
*
|
|
237
|
+
* @return void
|
|
238
|
+
*/
|
|
239
|
+
toggle() {
|
|
240
|
+
if (!this.currentActivity) {
|
|
241
|
+
this.showActivity();
|
|
242
|
+
} else {
|
|
243
|
+
this.hideActivity();
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
},
|
|
266
247
|
};
|
|
267
248
|
</script>
|
|
268
249
|
|
|
269
250
|
<style>
|
|
270
251
|
@keyframes btn-activity-in {
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
252
|
+
0%,
|
|
253
|
+
100% {
|
|
254
|
+
transform: scale(1);
|
|
255
|
+
}
|
|
256
|
+
30% {
|
|
257
|
+
transform: scale(0.98);
|
|
258
|
+
}
|
|
276
259
|
}
|
|
277
260
|
|
|
278
261
|
@keyframes btn-activity-out {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
262
|
+
0%,
|
|
263
|
+
100% {
|
|
264
|
+
transform: scale(1);
|
|
265
|
+
}
|
|
266
|
+
70% {
|
|
267
|
+
transform: scale(0.98);
|
|
268
|
+
}
|
|
284
269
|
}
|
|
285
270
|
|
|
286
271
|
.btn-activity-top,
|
|
@@ -291,79 +276,79 @@ export default {
|
|
|
291
276
|
.btn.btn-activity-left,
|
|
292
277
|
.btn-activity-right,
|
|
293
278
|
.btn.btn-activity-right {
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
279
|
+
display: inline-flex;
|
|
280
|
+
position: relative;
|
|
281
|
+
transition: all calc(333ms / 2) ease-in;
|
|
297
282
|
}
|
|
298
283
|
|
|
299
284
|
.btn-activity-top .activity-indicator,
|
|
300
285
|
.btn-activity-bottom .activity-indicator,
|
|
301
286
|
.btn-activity-left .activity-indicator,
|
|
302
287
|
.btn-activity-right .activity-indicator {
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
288
|
+
opacity: 0;
|
|
289
|
+
position: absolute;
|
|
290
|
+
visibility: hidden;
|
|
291
|
+
transition: opacity 333ms ease-in;
|
|
307
292
|
}
|
|
308
293
|
|
|
309
294
|
.btn-activity-top,
|
|
310
295
|
.btn-activity-bottom {
|
|
311
|
-
|
|
312
|
-
|
|
296
|
+
flex-direction: column;
|
|
297
|
+
align-items: center;
|
|
313
298
|
}
|
|
314
299
|
|
|
315
300
|
.btn-activity-top .activity-indicator,
|
|
316
301
|
.btn-activity-bottom .activity-indicator {
|
|
317
|
-
|
|
318
|
-
|
|
302
|
+
margin-left: auto;
|
|
303
|
+
margin-right: auto;
|
|
319
304
|
}
|
|
320
305
|
|
|
321
306
|
.btn-activity-top {
|
|
322
|
-
|
|
307
|
+
flex-direction: column-reverse;
|
|
323
308
|
}
|
|
324
309
|
|
|
325
310
|
.btn-activity-top .activity-indicator {
|
|
326
|
-
|
|
311
|
+
padding-bottom: 1em;
|
|
327
312
|
}
|
|
328
313
|
|
|
329
314
|
.btn-activity-bottom .activity-indicator {
|
|
330
|
-
|
|
315
|
+
padding-top: 1em;
|
|
331
316
|
}
|
|
332
317
|
|
|
333
318
|
.btn-activity-left,
|
|
334
319
|
.btn-activity-right {
|
|
335
|
-
|
|
336
|
-
|
|
320
|
+
align-items: center;
|
|
321
|
+
justify-content: center;
|
|
337
322
|
}
|
|
338
323
|
|
|
339
324
|
.btn-activity-left {
|
|
340
|
-
|
|
325
|
+
flex-direction: row-reverse;
|
|
341
326
|
}
|
|
342
327
|
|
|
343
328
|
.btn-activity-left .activity-indicator {
|
|
344
|
-
|
|
329
|
+
padding-right: 1em;
|
|
345
330
|
}
|
|
346
331
|
|
|
347
332
|
.btn-activity-right .activity-indicator {
|
|
348
|
-
|
|
333
|
+
padding-left: 1em;
|
|
349
334
|
}
|
|
350
335
|
|
|
351
336
|
.btn-activity:not(.btn-link) {
|
|
352
|
-
|
|
337
|
+
animation: btn-activity-in 333ms;
|
|
353
338
|
}
|
|
354
339
|
|
|
355
340
|
.btn-hide-activity:not(.btn-link) {
|
|
356
|
-
|
|
341
|
+
animation: btn-activity-out 333ms;
|
|
357
342
|
}
|
|
358
343
|
|
|
359
344
|
.btn-activity.btn-hide-activity .activity-indicator {
|
|
360
|
-
|
|
345
|
+
opacity: 0;
|
|
361
346
|
}
|
|
362
347
|
|
|
363
348
|
.btn-activity .activity-indicator {
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
349
|
+
opacity: 1;
|
|
350
|
+
visibility: visible;
|
|
351
|
+
position: relative;
|
|
352
|
+
font-size: 0.55em;
|
|
368
353
|
}
|
|
369
354
|
</style>
|