@tagplus/components 2.0.3 → 2.0.5
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/tp.common.js +1 -1
- package/dist/tp.common.js.map +1 -1
- package/dist/tp.css +2 -2
- package/dist/tp.umd.js +1 -1
- package/dist/tp.umd.js.map +1 -1
- package/dist/tp.umd.min.js +1 -1
- package/dist/tp.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Loader/Loader.vue +148 -58
- package/src/components/Tip/Tip.vue +62 -0
package/package.json
CHANGED
|
@@ -1,28 +1,120 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="tp-loader">
|
|
3
3
|
<div class="wrapper">
|
|
4
|
-
<svg
|
|
4
|
+
<svg
|
|
5
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
+
width="150px"
|
|
7
|
+
height="150px"
|
|
8
|
+
>
|
|
5
9
|
<mask id="mascara">
|
|
6
|
-
<rect
|
|
7
|
-
|
|
10
|
+
<rect
|
|
11
|
+
x="0"
|
|
12
|
+
y="0"
|
|
13
|
+
width="100%"
|
|
14
|
+
height="100%"
|
|
15
|
+
fill="white"
|
|
16
|
+
/>
|
|
17
|
+
<circle
|
|
18
|
+
id="circulo-interno"
|
|
19
|
+
class="circulo"
|
|
20
|
+
cx="45"
|
|
21
|
+
cy="50"
|
|
22
|
+
r="40"
|
|
23
|
+
fill="black"
|
|
24
|
+
/>
|
|
8
25
|
</mask>
|
|
9
|
-
<g
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
26
|
+
<g
|
|
27
|
+
id="bola"
|
|
28
|
+
fill="none"
|
|
29
|
+
fill-rule="evenodd"
|
|
30
|
+
transform="translate(30 30)"
|
|
31
|
+
>
|
|
32
|
+
<circle
|
|
33
|
+
id="circulo"
|
|
34
|
+
class="circulo"
|
|
35
|
+
cx="45"
|
|
36
|
+
cy="50"
|
|
37
|
+
r="40"
|
|
38
|
+
fill="#1F7DE7"
|
|
39
|
+
mask="url(#mascara)"
|
|
40
|
+
/>
|
|
41
|
+
<g
|
|
42
|
+
fill="none"
|
|
43
|
+
fill-rule="evenodd"
|
|
44
|
+
>
|
|
45
|
+
<circle
|
|
46
|
+
class="residuo top center"
|
|
47
|
+
cx="45"
|
|
48
|
+
cy="9"
|
|
49
|
+
r="15"
|
|
50
|
+
fill="#FFCB05"
|
|
51
|
+
/>
|
|
52
|
+
<circle
|
|
53
|
+
class="residuo top right"
|
|
54
|
+
cx="72"
|
|
55
|
+
cy="21"
|
|
56
|
+
r="8.5"
|
|
57
|
+
fill="#1F7DE7"
|
|
58
|
+
/>
|
|
59
|
+
<circle
|
|
60
|
+
class="residuo middle right"
|
|
61
|
+
cx="81"
|
|
62
|
+
cy="45"
|
|
63
|
+
r="12"
|
|
64
|
+
fill="#1F7DE7"
|
|
65
|
+
/>
|
|
66
|
+
<circle
|
|
67
|
+
class="residuo bottom right"
|
|
68
|
+
cx="71"
|
|
69
|
+
cy="70"
|
|
70
|
+
r="8.5"
|
|
71
|
+
fill="none"
|
|
72
|
+
stroke="#FFCB05"
|
|
73
|
+
stroke-width="3"
|
|
74
|
+
/>
|
|
75
|
+
<circle
|
|
76
|
+
class="residuo bottom center"
|
|
77
|
+
cx="45"
|
|
78
|
+
cy="81"
|
|
79
|
+
r="8.5"
|
|
80
|
+
fill="none"
|
|
81
|
+
stroke="#1F7DE7"
|
|
82
|
+
stroke-width="3"
|
|
83
|
+
/>
|
|
84
|
+
<circle
|
|
85
|
+
class="residuo bottom left"
|
|
86
|
+
cx="19"
|
|
87
|
+
cy="70"
|
|
88
|
+
r="8.5"
|
|
89
|
+
fill="#1F7DE7"
|
|
90
|
+
/>
|
|
91
|
+
<circle
|
|
92
|
+
class="residuo middle left"
|
|
93
|
+
cx="9"
|
|
94
|
+
cy="45"
|
|
95
|
+
r="10"
|
|
96
|
+
fill="#FFCB05"
|
|
97
|
+
/>
|
|
98
|
+
<circle
|
|
99
|
+
class="residuo top left"
|
|
100
|
+
cx="18"
|
|
101
|
+
cy="21"
|
|
102
|
+
r="8.5"
|
|
103
|
+
fill="none"
|
|
104
|
+
stroke="#1F7DE7"
|
|
105
|
+
stroke-width="3"
|
|
106
|
+
/>
|
|
20
107
|
</g>
|
|
21
108
|
</g>
|
|
22
109
|
</svg>
|
|
23
110
|
|
|
24
111
|
<div class="icones">
|
|
25
|
-
<
|
|
112
|
+
<i
|
|
113
|
+
v-for="(icon, k) in icons"
|
|
114
|
+
:key="k"
|
|
115
|
+
:class="icon"
|
|
116
|
+
:style="`--iconsItem:${k}`"
|
|
117
|
+
/>
|
|
26
118
|
</div>
|
|
27
119
|
|
|
28
120
|
<div class="texto">
|
|
@@ -47,22 +139,22 @@ export default {
|
|
|
47
139
|
type: Array,
|
|
48
140
|
required: false,
|
|
49
141
|
default: () => ([
|
|
50
|
-
'
|
|
51
|
-
'
|
|
52
|
-
'
|
|
53
|
-
'
|
|
54
|
-
'
|
|
55
|
-
'
|
|
56
|
-
'
|
|
57
|
-
'
|
|
58
|
-
'
|
|
59
|
-
'
|
|
60
|
-
'
|
|
61
|
-
'
|
|
62
|
-
'
|
|
63
|
-
'
|
|
64
|
-
'
|
|
65
|
-
'
|
|
142
|
+
'fa-solid fa-badge-percent',
|
|
143
|
+
'fa-solid fa-box-usd',
|
|
144
|
+
'fa-solid fa-credit-card-front',
|
|
145
|
+
'fa-solid fa-cart-shopping',
|
|
146
|
+
'fa-solid fa-gift',
|
|
147
|
+
'fa-solid fa-dolly-flatbed-alt',
|
|
148
|
+
'fa-solid fa-receipt',
|
|
149
|
+
'fa-solid fa-chart-pie-alt',
|
|
150
|
+
'fa-solid fa-badge-percent',
|
|
151
|
+
'fa-solid fa-box-usd',
|
|
152
|
+
'fa-solid fa-credit-card-front',
|
|
153
|
+
'fa-solid fa-cart-shopping',
|
|
154
|
+
'fa-solid fa-gift',
|
|
155
|
+
'fa-solid fa-dolly-flatbed-alt',
|
|
156
|
+
'fa-solid fa-receipt',
|
|
157
|
+
'fa-solid fa-chart-pie-alt'
|
|
66
158
|
])
|
|
67
159
|
}
|
|
68
160
|
}
|
|
@@ -70,19 +162,19 @@ export default {
|
|
|
70
162
|
</script>
|
|
71
163
|
|
|
72
164
|
<style lang="scss" scoped>
|
|
73
|
-
@import url(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
165
|
+
@import url("animations.scss");
|
|
166
|
+
$oTop: 0;
|
|
167
|
+
$oBottom: 70%;
|
|
168
|
+
$oMiddle: 35%;
|
|
169
|
+
$oLeft: 0;
|
|
170
|
+
$oRight: 65%;
|
|
171
|
+
$oCenter: 30%;
|
|
80
172
|
|
|
81
|
-
|
|
173
|
+
$oTrans: 40px;
|
|
82
174
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
175
|
+
//tempo da animacao em segundos
|
|
176
|
+
$animationTime: 2;
|
|
177
|
+
$numIcons: 8;
|
|
86
178
|
|
|
87
179
|
.tp-loader {
|
|
88
180
|
position: fixed;
|
|
@@ -96,11 +188,11 @@ export default {
|
|
|
96
188
|
position: absolute;
|
|
97
189
|
width: 100%;
|
|
98
190
|
height: 100%;
|
|
99
|
-
top:0;
|
|
100
|
-
bottom:0;
|
|
101
|
-
left:0;
|
|
102
|
-
right:0;
|
|
103
|
-
background-color: #
|
|
191
|
+
top: 0;
|
|
192
|
+
bottom: 0;
|
|
193
|
+
left: 0;
|
|
194
|
+
right: 0;
|
|
195
|
+
background-color: #fff;
|
|
104
196
|
opacity: 1;
|
|
105
197
|
}
|
|
106
198
|
.wrapper {
|
|
@@ -122,16 +214,16 @@ export default {
|
|
|
122
214
|
}
|
|
123
215
|
#circulo {
|
|
124
216
|
animation-name: expande;
|
|
125
|
-
animation-duration
|
|
217
|
+
animation-duration: #{$animationTime}s;
|
|
126
218
|
animation-direction: normal;
|
|
127
|
-
animation-iteration-count:infinite;
|
|
219
|
+
animation-iteration-count: infinite;
|
|
128
220
|
animation-timing-function: linear;
|
|
129
221
|
}
|
|
130
222
|
#circulo-interno {
|
|
131
223
|
animation-name: expandeInterno;
|
|
132
|
-
animation-duration
|
|
224
|
+
animation-duration: #{$animationTime}s;
|
|
133
225
|
animation-direction: normal;
|
|
134
|
-
animation-iteration-count:infinite;
|
|
226
|
+
animation-iteration-count: infinite;
|
|
135
227
|
animation-timing-function: linear;
|
|
136
228
|
}
|
|
137
229
|
|
|
@@ -170,7 +262,7 @@ export default {
|
|
|
170
262
|
#bola {
|
|
171
263
|
.residuo {
|
|
172
264
|
animation-name: residuo;
|
|
173
|
-
animation-duration
|
|
265
|
+
animation-duration: #{$animationTime}s;
|
|
174
266
|
animation-direction: reverse;
|
|
175
267
|
animation-iteration-count: infinite;
|
|
176
268
|
animation-timing-function: ease-in;
|
|
@@ -192,21 +284,20 @@ export default {
|
|
|
192
284
|
transform-origin: #{$oCenter} #{$oBottom};
|
|
193
285
|
|
|
194
286
|
&.right {
|
|
195
|
-
transform-origin:45% 65%;
|
|
287
|
+
transform-origin: 45% 65%;
|
|
196
288
|
transform: translate(#{$oTrans}, #{$oTrans}) scale(0.1);
|
|
197
289
|
}
|
|
198
290
|
&.left {
|
|
199
|
-
transform-origin:15% 65%;
|
|
291
|
+
transform-origin: 15% 65%;
|
|
200
292
|
transform: translate(-#{$oTrans}, #{$oTrans}) scale(0.1);
|
|
201
293
|
}
|
|
202
294
|
}
|
|
203
295
|
&.middle {
|
|
204
|
-
|
|
205
296
|
&.right {
|
|
206
|
-
transform-origin
|
|
297
|
+
transform-origin: #{$oRight} #{$oMiddle};
|
|
207
298
|
}
|
|
208
299
|
&.left {
|
|
209
|
-
transform-origin
|
|
300
|
+
transform-origin: #{$oLeft} #{$oMiddle};
|
|
210
301
|
}
|
|
211
302
|
}
|
|
212
303
|
}
|
|
@@ -221,7 +312,6 @@ export default {
|
|
|
221
312
|
font-size: 1.5em;
|
|
222
313
|
font-weight: bold;
|
|
223
314
|
}
|
|
224
|
-
|
|
225
315
|
}
|
|
226
316
|
}
|
|
227
317
|
</style>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<el-row
|
|
3
|
+
v-if="!title"
|
|
3
4
|
:id="`${_id}`"
|
|
4
5
|
type="flex"
|
|
5
6
|
align="middle"
|
|
@@ -25,6 +26,34 @@
|
|
|
25
26
|
/>
|
|
26
27
|
</el-col>
|
|
27
28
|
</el-row>
|
|
29
|
+
<el-row
|
|
30
|
+
v-else
|
|
31
|
+
:id="`${_id}`"
|
|
32
|
+
type="flex"
|
|
33
|
+
align="middle"
|
|
34
|
+
justify="space-between"
|
|
35
|
+
:class="tptipclasses">
|
|
36
|
+
<el-col
|
|
37
|
+
:span="17"
|
|
38
|
+
>
|
|
39
|
+
<el-row align="middle" type="flex" style="min-width:25px; margin:15px; padding: auto">
|
|
40
|
+
<em class="far fa-lightbulb-on" />
|
|
41
|
+
<b class="tp-title">{{ title }}</b>
|
|
42
|
+
</el-row>
|
|
43
|
+
</el-col>
|
|
44
|
+
<el-col :span="3" class="flexContent justify-content-end">
|
|
45
|
+
<em class="fa fa-ellipsis-h tp-close-button" @click="closed = !closed" />
|
|
46
|
+
</el-col>
|
|
47
|
+
|
|
48
|
+
<el-col :span="24">
|
|
49
|
+
<div
|
|
50
|
+
:id="`${_id}-text`"
|
|
51
|
+
:class="'tp-text ' + (closed ? 'tp-vanish' : '' )"
|
|
52
|
+
style="margin:15px; margin-left:0px"
|
|
53
|
+
v-html="text"
|
|
54
|
+
/>
|
|
55
|
+
</el-col>
|
|
56
|
+
</el-row>
|
|
28
57
|
</template>
|
|
29
58
|
|
|
30
59
|
<script>
|
|
@@ -43,12 +72,23 @@ export default {
|
|
|
43
72
|
default: ''
|
|
44
73
|
},
|
|
45
74
|
|
|
75
|
+
title: {
|
|
76
|
+
type: String,
|
|
77
|
+
default: ''
|
|
78
|
+
},
|
|
79
|
+
|
|
46
80
|
type: {
|
|
47
81
|
type: String,
|
|
48
82
|
default: 'default'
|
|
49
83
|
}
|
|
50
84
|
},
|
|
51
85
|
|
|
86
|
+
data () {
|
|
87
|
+
return {
|
|
88
|
+
closed: false
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
|
|
52
92
|
computed: {
|
|
53
93
|
_id () {
|
|
54
94
|
return this.id || this.$options.name
|
|
@@ -136,4 +176,26 @@ export default {
|
|
|
136
176
|
color: #08a19e;
|
|
137
177
|
}
|
|
138
178
|
}
|
|
179
|
+
|
|
180
|
+
.tp-close-button {
|
|
181
|
+
padding: 10px;
|
|
182
|
+
cursor: pointer;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.tp-title {
|
|
186
|
+
font-size: 16px;
|
|
187
|
+
padding-left: 16px;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.tp-text {
|
|
191
|
+
height: auto;
|
|
192
|
+
transition: 0.4s opacity ease-out;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.tp-vanish {
|
|
196
|
+
position: absolute;
|
|
197
|
+
height:0;
|
|
198
|
+
opacity:0;
|
|
199
|
+
transition: 0s opacity linear;
|
|
200
|
+
}
|
|
139
201
|
</style>
|