toggle-components-library 1.28.6 → 1.28.7-beta.0
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/toggle-components-library.common.js +167 -0
- package/dist/toggle-components-library.common.js.map +1 -1
- package/dist/toggle-components-library.css +1 -1
- package/dist/toggle-components-library.umd.js +167 -0
- package/dist/toggle-components-library.umd.js.map +1 -1
- package/dist/toggle-components-library.umd.min.js +1 -1
- package/dist/toggle-components-library.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/.DS_Store +0 -0
- package/src/components/loaders/ToggleProgressLoader.vue +99 -0
- package/src/index.js +3 -0
- package/src/sass/includes/_as_loaders.scss +131 -1
package/package.json
CHANGED
package/src/.DS_Store
CHANGED
|
Binary file
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="toggle-progress-loader" :class="{'toggle-progress-loader-error' : error , 'toggle-progress-loader-loading' : loading }">
|
|
3
|
+
<div class="toggle-progress-loader-modal">
|
|
4
|
+
<div class="toggle-progress-loader-circle">
|
|
5
|
+
<div v-if="!error" class="toggle-progress-loader-circle__percent">
|
|
6
|
+
{{ percent }}<span>%</span>
|
|
7
|
+
</div>
|
|
8
|
+
<div v-else class="toggle-progress-loader-circle__error" >!</div>
|
|
9
|
+
|
|
10
|
+
<svg class="toggle-progress-loader-circle__progress" viewBox="0 0 106 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
11
|
+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
12
|
+
<g transform="translate(-17.000000, -17.000000)">
|
|
13
|
+
<circle :stroke="circleColor" stroke-width="7" fill-rule="nonzero" cx="70" cy="70" r="50"></circle>
|
|
14
|
+
<path class="toggle-progress-loader-circle__path" d="M70,120 C97.6142375,120 120,97.6142375 120,70 C120,42.3857625 97.6142375,20 70,20 C42.3857625,20 20,42.3857625 20,70 C20,97.6142375 42.3857625,120 70,120 Z" :stroke="progressColor" stroke-width="7" :stroke-dasharray="circle" fill-rule="nonzero" transform="translate(70.000000, 70.000000) rotate(-125.000000) translate(-70.000000, -70.000000) "></path>
|
|
15
|
+
</g>
|
|
16
|
+
</g>
|
|
17
|
+
</svg>
|
|
18
|
+
</div>
|
|
19
|
+
<p class="toggle-progress-loader-message" v-html="message"></p>
|
|
20
|
+
<button
|
|
21
|
+
v-if="buttonShow"
|
|
22
|
+
@click="click"
|
|
23
|
+
class="toggle-progress-loader-cancel"
|
|
24
|
+
:style="'color: ' + buttonColor + '; background-color: ' + buttonBgColor"
|
|
25
|
+
:disabled="disabled || loading"
|
|
26
|
+
>
|
|
27
|
+
<div class="toggle-progress-loader-cancel__loading" v-if="loading" ></div>
|
|
28
|
+
<span>{{ buttonText }}</span>
|
|
29
|
+
</button>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script>
|
|
35
|
+
export default {
|
|
36
|
+
name: 'ProgressLoader',
|
|
37
|
+
props: {
|
|
38
|
+
buttonShow:{
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: false
|
|
41
|
+
},
|
|
42
|
+
buttonText: {
|
|
43
|
+
type: String,
|
|
44
|
+
default: "Cancel"
|
|
45
|
+
},
|
|
46
|
+
buttonColor: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: "#ffffff"
|
|
49
|
+
},
|
|
50
|
+
buttonBgColor: {
|
|
51
|
+
type: String,
|
|
52
|
+
default: "#ee757b"
|
|
53
|
+
},
|
|
54
|
+
message: {
|
|
55
|
+
type: String,
|
|
56
|
+
default: "Preparing download<br />Please Wait..."
|
|
57
|
+
},
|
|
58
|
+
circleColor: {
|
|
59
|
+
type: String,
|
|
60
|
+
default: "#949494"
|
|
61
|
+
},
|
|
62
|
+
progressColor: {
|
|
63
|
+
type: String,
|
|
64
|
+
default: "#ee757b"
|
|
65
|
+
},
|
|
66
|
+
percent: {
|
|
67
|
+
type: Number,
|
|
68
|
+
default: 70
|
|
69
|
+
},
|
|
70
|
+
error: {
|
|
71
|
+
type: Boolean,
|
|
72
|
+
default: false
|
|
73
|
+
},
|
|
74
|
+
loading: {
|
|
75
|
+
type: Boolean,
|
|
76
|
+
default: false
|
|
77
|
+
},
|
|
78
|
+
disabled: {
|
|
79
|
+
type: Boolean,
|
|
80
|
+
default: false
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
computed: {
|
|
84
|
+
circle() {
|
|
85
|
+
return (this.percent / 100) * 100 * Math.PI + ",9999";
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
methods: {
|
|
89
|
+
click(){
|
|
90
|
+
/**
|
|
91
|
+
* Emitted when the button is clicked.
|
|
92
|
+
* @event click
|
|
93
|
+
* @type {Event}
|
|
94
|
+
*/
|
|
95
|
+
this.$emit('click');
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
</script>
|
package/src/index.js
CHANGED
|
@@ -31,7 +31,9 @@ import ToggleInputSearch from "./components/forms/ToggleInputSearch.vue";
|
|
|
31
31
|
import ToggleInputRadioButtonGroup from "./components/forms/ToggleInputRadioButtonGroup.vue";
|
|
32
32
|
import ToggleButton from "./components/buttons/ToggleButton.vue";
|
|
33
33
|
import ToggleLoginButton from "./components/buttons/ToggleLoginButton.vue";
|
|
34
|
+
|
|
34
35
|
import ToggleFillLoader from "./components/loaders/ToggleFillLoader.vue";
|
|
36
|
+
import ToggleProgressLoader from "./components/loaders/ToggleProgressLoader.vue";
|
|
35
37
|
|
|
36
38
|
|
|
37
39
|
import ToggleTable from './components/tables/ToggleTable.vue';
|
|
@@ -100,6 +102,7 @@ const Components = {
|
|
|
100
102
|
ToggleInputCheckbox,
|
|
101
103
|
ToggleInputCheckboxInline,
|
|
102
104
|
ToggleFillLoader,
|
|
105
|
+
ToggleProgressLoader,
|
|
103
106
|
ToggleInputImage,
|
|
104
107
|
ToggleButton,
|
|
105
108
|
ToggleLoginButton,
|
|
@@ -34,11 +34,141 @@
|
|
|
34
34
|
top:50%;
|
|
35
35
|
left:50%;
|
|
36
36
|
border-radius: 50%;
|
|
37
|
-
|
|
37
|
+
border: .25rem solid $toggle-button-disabled;
|
|
38
38
|
border-top-color: $toggle-white;
|
|
39
39
|
animation: spin 1s infinite linear;
|
|
40
40
|
margin-top:-1rem;
|
|
41
41
|
margin-left:-1rem;
|
|
42
42
|
width: 2rem;
|
|
43
43
|
height: 2rem;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/*
|
|
47
|
+
* ToggleProgressLoader
|
|
48
|
+
*/
|
|
49
|
+
|
|
50
|
+
.toggle-progress-loader{
|
|
51
|
+
top:0;
|
|
52
|
+
left:0;
|
|
53
|
+
height: 100vh;
|
|
54
|
+
width:100vw;
|
|
55
|
+
z-index:10;
|
|
56
|
+
background: rgba(220, 220, 220, 0.5);
|
|
57
|
+
position: fixed !important;
|
|
58
|
+
font-family: $toggle-font-family;
|
|
59
|
+
|
|
60
|
+
&-modal {
|
|
61
|
+
width: 100%;
|
|
62
|
+
max-width: 230px;
|
|
63
|
+
min-height: 300px;
|
|
64
|
+
background: white;
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 50%;
|
|
67
|
+
left: 50%;
|
|
68
|
+
transform: translate(-50%, -50%);
|
|
69
|
+
text-align: center;
|
|
70
|
+
padding: 30px;
|
|
71
|
+
box-sizing: border-box;
|
|
72
|
+
border-radius: 15px;
|
|
73
|
+
box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&-circle {
|
|
80
|
+
display: inline-block;
|
|
81
|
+
position: relative;
|
|
82
|
+
&__progress {
|
|
83
|
+
max-width: 130px;
|
|
84
|
+
max-height: 130px;
|
|
85
|
+
width: 100%;
|
|
86
|
+
transform: scaleX(-1) rotate(-55deg);
|
|
87
|
+
overflow: inherit;
|
|
88
|
+
}
|
|
89
|
+
&__percent {
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: 50%;
|
|
92
|
+
left: 50%;
|
|
93
|
+
transform: translate(-50%, -50%);
|
|
94
|
+
display: flex;
|
|
95
|
+
align-items: center;
|
|
96
|
+
font-family: $toggle-font-family;
|
|
97
|
+
color: #354b64;
|
|
98
|
+
span {
|
|
99
|
+
font-size: 14px;
|
|
100
|
+
margin-left: 3px;
|
|
101
|
+
position: absolute;
|
|
102
|
+
padding-left: 100%;
|
|
103
|
+
font-family: $toggle-font-family;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
&__path {
|
|
107
|
+
transition: 0.3s ease-in-out all;
|
|
108
|
+
}
|
|
109
|
+
&__error {
|
|
110
|
+
position: absolute;
|
|
111
|
+
top: 50%;
|
|
112
|
+
left: 50%;
|
|
113
|
+
transform: translate(-50%, -50%);
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
font-family: $toggle-font-family;
|
|
117
|
+
font-weight: 700;
|
|
118
|
+
font-size: 34px;
|
|
119
|
+
color: #354b64;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&-message{
|
|
124
|
+
margin: 30px 0 0 0;
|
|
125
|
+
font-size: 16px;
|
|
126
|
+
line-height: 28px;
|
|
127
|
+
font-family: $toggle-font-family;
|
|
128
|
+
color: #354b64;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&-cancel {
|
|
132
|
+
background-color: #ee757b;
|
|
133
|
+
border: none;
|
|
134
|
+
margin: 30px auto 0 auto;
|
|
135
|
+
display: inline-flex;
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
align-items: center;
|
|
138
|
+
justify-content: center;
|
|
139
|
+
border-radius: 15px;
|
|
140
|
+
padding: 6px 12px;
|
|
141
|
+
font-size: 12px;
|
|
142
|
+
color: #fff;
|
|
143
|
+
transition: background-color 0.2s ease;
|
|
144
|
+
position: relative;
|
|
145
|
+
&:hover {
|
|
146
|
+
opacity: 0.95;
|
|
147
|
+
}
|
|
148
|
+
&__loading {
|
|
149
|
+
border-radius: 50%;
|
|
150
|
+
border: .25rem solid $toggle-button-disabled;
|
|
151
|
+
border-top-color: $toggle-white;
|
|
152
|
+
animation: spin 1s infinite linear;
|
|
153
|
+
margin: 0 auto;
|
|
154
|
+
width:0.5rem;
|
|
155
|
+
height:0.5rem;
|
|
156
|
+
position:absolute;
|
|
157
|
+
left:50%;
|
|
158
|
+
margin-left: -0.5rem;
|
|
159
|
+
top:50%;
|
|
160
|
+
margin-top: -0.5rem;
|
|
161
|
+
box-sizing:content-box;
|
|
162
|
+
}
|
|
163
|
+
&:disabled{
|
|
164
|
+
opacity: 0.8;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
&-loading {
|
|
168
|
+
.toggle-progress-loader-cancel {
|
|
169
|
+
span {
|
|
170
|
+
opacity: 0;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}
|
|
44
174
|
}
|