@tagplus/components 2.0.2 → 2.0.4
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 +6 -7
- 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/Autosuggest/Autosuggest.vue +4 -4
- package/src/components/Dialog/Dialog.vue +1 -1
- package/src/components/InputNumber/InputNumber.vue +2 -2
- package/src/components/Loader/Loader.vue +148 -58
- package/src/components/Multisuggest/Multisuggest.vue +5 -5
- package/src/components/OptionsListItem/OptionsListItem.vue +8 -8
- package/src/components/Step/Step.vue +3 -3
package/package.json
CHANGED
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
v-else
|
|
57
57
|
slot="prepend"
|
|
58
58
|
>
|
|
59
|
-
<
|
|
59
|
+
<em class="far fa-search" />
|
|
60
60
|
</template>
|
|
61
61
|
</template>
|
|
62
62
|
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
:justify="selectedLabel ? 'space-between' : 'end'"
|
|
74
74
|
align="middle"
|
|
75
75
|
>
|
|
76
|
-
<
|
|
76
|
+
<em
|
|
77
77
|
v-if="selectedLabel && !selectDisabled"
|
|
78
78
|
:id="`${_id}-btn-clear`"
|
|
79
79
|
class="fa fa-times-circle icon-close"
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
class="dividerSuggest"
|
|
91
91
|
/>
|
|
92
92
|
|
|
93
|
-
<
|
|
93
|
+
<em
|
|
94
94
|
v-show="!showClose && !selectDisabled"
|
|
95
95
|
:id="`${_id}-btn-close`"
|
|
96
96
|
:class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
:class="{'created': item.created}"
|
|
130
130
|
>
|
|
131
131
|
<template v-if="item.created">
|
|
132
|
-
<a :id="`${_id}-btn-create`"><
|
|
132
|
+
<a :id="`${_id}-btn-create`"><em class="far fa-plus" /> {{ newItem }}</a>
|
|
133
133
|
</template>
|
|
134
134
|
<slot
|
|
135
135
|
v-else
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
:class="{'is-disabled': minDisabled}"
|
|
18
18
|
@keydown.enter="decrease"
|
|
19
19
|
>
|
|
20
|
-
<
|
|
20
|
+
<em :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`" />
|
|
21
21
|
</span>
|
|
22
22
|
<span
|
|
23
23
|
v-if="controls"
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
:class="{'is-disabled': maxDisabled}"
|
|
28
28
|
@keydown.enter="increase"
|
|
29
29
|
>
|
|
30
|
-
<
|
|
30
|
+
<em :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`" />
|
|
31
31
|
</span>
|
|
32
32
|
<el-input
|
|
33
33
|
ref="input"
|
|
@@ -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
|
-
<i
|
|
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>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
style="visibility: hidden;"
|
|
14
14
|
class="el-input-group__prepend"
|
|
15
15
|
>
|
|
16
|
-
<
|
|
16
|
+
<em class="far fa-search" />
|
|
17
17
|
</div>
|
|
18
18
|
<span v-if="collapseTags && selected.length">
|
|
19
19
|
<el-tooltip placement="top">
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
v-else
|
|
125
125
|
slot="prepend"
|
|
126
126
|
>
|
|
127
|
-
<
|
|
127
|
+
<em class="far fa-search" />
|
|
128
128
|
</template>
|
|
129
129
|
</template>
|
|
130
130
|
<template
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
:justify="selected.length ? 'space-between' : 'end'"
|
|
140
140
|
align="middle"
|
|
141
141
|
>
|
|
142
|
-
<
|
|
142
|
+
<em
|
|
143
143
|
v-if="selected.length && !selectDisabled"
|
|
144
144
|
:id="`${_id}-btn-clear`"
|
|
145
145
|
class="fa fa-times-circle icon-close"
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
class="dividerSuggest"
|
|
157
157
|
/>
|
|
158
158
|
|
|
159
|
-
<
|
|
159
|
+
<em
|
|
160
160
|
v-show="!showClose && !selectDisabled"
|
|
161
161
|
:id="`${_id}-btn-close`"
|
|
162
162
|
:class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
:class="{'created': item.created}"
|
|
196
196
|
>
|
|
197
197
|
<template v-if="item.created">
|
|
198
|
-
<a :id="`${_id}-btn-create`"><
|
|
198
|
+
<a :id="`${_id}-btn-create`"><em class="far fa-plus" /> Cadastrar {{ query ? `"${query}"` : "novo item" }}</a>
|
|
199
199
|
</template>
|
|
200
200
|
<slot
|
|
201
201
|
v-else
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
@keyup.enter="updateOption"
|
|
8
8
|
>
|
|
9
9
|
<div :class="['icon', direction]">
|
|
10
|
-
<
|
|
10
|
+
<em :class="[icon, 'options-icon']" />
|
|
11
11
|
<p class="text">
|
|
12
12
|
<span
|
|
13
13
|
v-for="(text, index) in texts"
|
|
@@ -97,8 +97,8 @@ export default {
|
|
|
97
97
|
margin-top: 15px;
|
|
98
98
|
|
|
99
99
|
&.entrada {
|
|
100
|
-
@include option-list-item-hover(#
|
|
101
|
-
@include option-list-item-checked(#
|
|
100
|
+
@include option-list-item-hover(#08a19e);
|
|
101
|
+
@include option-list-item-checked(#08a19e);
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
&.saida {
|
|
@@ -118,6 +118,10 @@ export default {
|
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
+
&:focus{
|
|
122
|
+
border: 1px solid #437cf9;
|
|
123
|
+
}
|
|
124
|
+
|
|
121
125
|
.icon {
|
|
122
126
|
color: #565b66;
|
|
123
127
|
display: flex;
|
|
@@ -132,7 +136,7 @@ export default {
|
|
|
132
136
|
min-width: 130px;
|
|
133
137
|
|
|
134
138
|
.text {
|
|
135
|
-
text-align:
|
|
139
|
+
text-align: center;
|
|
136
140
|
width: 70px;
|
|
137
141
|
|
|
138
142
|
span {
|
|
@@ -173,10 +177,6 @@ export default {
|
|
|
173
177
|
|
|
174
178
|
}
|
|
175
179
|
|
|
176
|
-
.tp-options-list-item:focus{
|
|
177
|
-
border: 1px solid #437cf9;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
180
|
.option-item-badge{
|
|
181
181
|
background-color: #F56C6C;
|
|
182
182
|
border: 1px solid #FFF;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
class="el-step__line"
|
|
18
18
|
:style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
|
|
19
19
|
>
|
|
20
|
-
<
|
|
20
|
+
<em class="el-step__line-inner" :style="lineStyle" />
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
23
|
<div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
v-if="currentStatus !== 'success' && currentStatus !== 'error'"
|
|
26
26
|
name="icon"
|
|
27
27
|
>
|
|
28
|
-
<
|
|
28
|
+
<em v-if="icon" class="el-step__icon-inner" :class="[icon]" />
|
|
29
29
|
<div v-if="!icon && !isSimple" class="el-step__icon-inner">
|
|
30
30
|
{{ index + 1 }}
|
|
31
31
|
</div>
|
|
32
32
|
</slot>
|
|
33
|
-
<
|
|
33
|
+
<em
|
|
34
34
|
v-else
|
|
35
35
|
:class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
|
|
36
36
|
class="el-step__icon-inner is-status"
|