vue-intergrall-plugins 1.0.45 → 1.0.46
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/vue-intergrall-plugins.esm.js +685 -508
- package/dist/vue-intergrall-plugins.min.js +1 -1
- package/dist/vue-intergrall-plugins.ssr.js +652 -507
- package/package.json +1 -1
- package/src/lib-components/Email/EmailExpanded.vue +207 -0
- package/src/lib-components/Email/EmailFrom.vue +6 -1
- package/src/lib-components/Email/EmailItem.vue +41 -7
- package/src/lib-components/Email/EmailTo.vue +6 -1
package/package.json
CHANGED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="email-blocker" @click="close">
|
|
3
|
+
<div class="email-blocker-content box-shadow" @click.stop>
|
|
4
|
+
<fa-icon :icon="['fas', 'times-circle']" class="sc-icone-fechar sc-icone-fechar--interno" @click="close" />
|
|
5
|
+
<h1 class="email-title" v-text="assunto ? replaceUnicodeWithEmoji(htmlEntityToEmoji(assunto)) : '(Sem assunto)'">
|
|
6
|
+
</h1>
|
|
7
|
+
<table class="email-content-table">
|
|
8
|
+
<tbody>
|
|
9
|
+
<tr>
|
|
10
|
+
<th>
|
|
11
|
+
De:
|
|
12
|
+
</th>
|
|
13
|
+
<td>
|
|
14
|
+
<span v-for="(sender, index) in from" :key="`from-${index}`">
|
|
15
|
+
{{ formattedName(sender.name, index, from.length, true) }}
|
|
16
|
+
{{ formattedMail(sender.mail, index, from.length, true) }}
|
|
17
|
+
</span>
|
|
18
|
+
</td>
|
|
19
|
+
</tr>
|
|
20
|
+
<tr>
|
|
21
|
+
<th>
|
|
22
|
+
Para:
|
|
23
|
+
</th>
|
|
24
|
+
<td>
|
|
25
|
+
<span v-for="(recipient, index) in para" :key="`to-${index}`">
|
|
26
|
+
{{ formattedToName(recipient.name, index, para.length) }}
|
|
27
|
+
{{ `<${recipient.mail}>` }}
|
|
28
|
+
</span>
|
|
29
|
+
</td>
|
|
30
|
+
</tr>
|
|
31
|
+
<tr>
|
|
32
|
+
<th>Data:</th>
|
|
33
|
+
<td>{{ dataHora }} - {{ formattedDate }}</td>
|
|
34
|
+
</tr>
|
|
35
|
+
</tbody>
|
|
36
|
+
</table>
|
|
37
|
+
<hr class="email-divisor" />
|
|
38
|
+
<div class="email-raw-content">
|
|
39
|
+
<h2>Mensagem original</h2>
|
|
40
|
+
<div v-text="html || mensagem"></div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
<script>
|
|
47
|
+
import { textoLongo } from "@/mixins/formatarTexto"
|
|
48
|
+
|
|
49
|
+
export default {
|
|
50
|
+
mixins: [textoLongo],
|
|
51
|
+
props: {
|
|
52
|
+
dicionario: {
|
|
53
|
+
type: Object
|
|
54
|
+
},
|
|
55
|
+
from: {
|
|
56
|
+
type: Array
|
|
57
|
+
},
|
|
58
|
+
para: {
|
|
59
|
+
type: Array
|
|
60
|
+
},
|
|
61
|
+
html: {
|
|
62
|
+
type: String
|
|
63
|
+
},
|
|
64
|
+
assunto: {
|
|
65
|
+
type: String
|
|
66
|
+
},
|
|
67
|
+
dataHora: {
|
|
68
|
+
type: String
|
|
69
|
+
},
|
|
70
|
+
mensagem: {
|
|
71
|
+
type: String
|
|
72
|
+
},
|
|
73
|
+
anexos: {
|
|
74
|
+
type: Array,
|
|
75
|
+
default: () => []
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
computed: {
|
|
79
|
+
formattedDate() {
|
|
80
|
+
return this.formataDateHoraDateFns(this.dataHora, this.dataServer, this.dicionario)
|
|
81
|
+
}
|
|
82
|
+
},
|
|
83
|
+
data() {
|
|
84
|
+
return {
|
|
85
|
+
secondaryBlocker: false,
|
|
86
|
+
imageSource: ""
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
methods: {
|
|
90
|
+
close() {
|
|
91
|
+
this.$emit('close')
|
|
92
|
+
},
|
|
93
|
+
formattedName(name, index, length, isOpen) {
|
|
94
|
+
return `${name}${index !== length - 1 && !isOpen ? ', ' : ''}`;
|
|
95
|
+
},
|
|
96
|
+
formattedMail(mail, index, length, isOpen) {
|
|
97
|
+
return `<${mail}${index !== length - 1 && isOpen ? '>, ' : '>'}`;
|
|
98
|
+
},
|
|
99
|
+
formattedToName(name, index, length) {
|
|
100
|
+
return index === 0 ? `Para: ${name || ''}` : name ? `${name}${index !== length - 1 ? ', ' : ''}` : '';
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<style scoped>
|
|
107
|
+
.sc-icone-fechar {
|
|
108
|
+
cursor: pointer;
|
|
109
|
+
position: absolute;
|
|
110
|
+
top: 0;
|
|
111
|
+
right: 0;
|
|
112
|
+
background-color: #FFF;
|
|
113
|
+
border-radius: 50%;
|
|
114
|
+
z-index: 1;
|
|
115
|
+
color: #E74C3C;
|
|
116
|
+
font-size: 20.8px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.sc-icone-fechar.sc-icone-fechar--interno {
|
|
120
|
+
top: 5px;
|
|
121
|
+
right: 5px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.email-blocker {
|
|
125
|
+
font-family: 'Roboto', sans-serif;
|
|
126
|
+
position: absolute;
|
|
127
|
+
top: 0;
|
|
128
|
+
left: 0;
|
|
129
|
+
width: 100vw;
|
|
130
|
+
height: 100vh;
|
|
131
|
+
display: flex;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
align-items: center;
|
|
134
|
+
z-index: 99;
|
|
135
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
136
|
+
overflow: visible;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.email-blocker-content {
|
|
140
|
+
width: 90%;
|
|
141
|
+
height: 90%;
|
|
142
|
+
max-width: 90%;
|
|
143
|
+
max-height: 90%;
|
|
144
|
+
overflow: hidden auto;
|
|
145
|
+
position: relative;
|
|
146
|
+
background-color: #FFF;
|
|
147
|
+
color: #222;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.email-title {
|
|
151
|
+
background: #222;
|
|
152
|
+
color: #FFF;
|
|
153
|
+
margin: 0 0 10px 0;
|
|
154
|
+
padding: 5px 10px;
|
|
155
|
+
border-top-left-radius: 5px;
|
|
156
|
+
border-top-right-radius: 5px;
|
|
157
|
+
font-size: 1.1rem;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.email-content-table {
|
|
161
|
+
padding: 0;
|
|
162
|
+
margin: 0 10px 10px;
|
|
163
|
+
font-size: .95rem;
|
|
164
|
+
border-collapse: collapse;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.email-content-table th,
|
|
168
|
+
.email-content-table td {
|
|
169
|
+
border: solid thin #e0e0e0;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.email-content-table th {
|
|
173
|
+
min-width: 100px;
|
|
174
|
+
text-align: left;
|
|
175
|
+
vertical-align: text-top;
|
|
176
|
+
padding: 12px 20px;
|
|
177
|
+
font-weight: 400;
|
|
178
|
+
border-right: unset;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.email-divisor {
|
|
182
|
+
margin-top: 15px;
|
|
183
|
+
margin-bottom: 10px;
|
|
184
|
+
height: 1px;
|
|
185
|
+
width: 100%;
|
|
186
|
+
background: #e0e0e0;
|
|
187
|
+
border: unset;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.email-content-table td {
|
|
191
|
+
padding: 8px;
|
|
192
|
+
border-left: unset;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.email-raw-content {
|
|
196
|
+
display: flex;
|
|
197
|
+
flex-direction: column;
|
|
198
|
+
gap: 10px;
|
|
199
|
+
padding: 0 15px 15px;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.email-raw-content h2 {
|
|
203
|
+
margin: 0;
|
|
204
|
+
padding: 0;
|
|
205
|
+
font-size: 1rem;
|
|
206
|
+
}
|
|
207
|
+
</style>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
2
|
+
<div :class="emailFromClass">
|
|
3
3
|
<p class="from" v-if="currentName" v-text="currentName" :title="currentName"></p>
|
|
4
4
|
<div v-if="showMail" class="additional-container">
|
|
5
5
|
<span class="additional" v-text="`${mail}`" :title="mail"></span>
|
|
@@ -55,6 +55,11 @@ export default {
|
|
|
55
55
|
type: Boolean,
|
|
56
56
|
required: false,
|
|
57
57
|
default: true
|
|
58
|
+
},
|
|
59
|
+
emailFromClass: {
|
|
60
|
+
type: String,
|
|
61
|
+
required: false,
|
|
62
|
+
default: 'email-from'
|
|
58
63
|
}
|
|
59
64
|
}
|
|
60
65
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
<div class="email-header-content">
|
|
10
10
|
<div class="email-header-infos">
|
|
11
11
|
<template v-if="from && from.length">
|
|
12
|
-
<div class="email-to-from-container">
|
|
12
|
+
<div class="email-to-from-container" ref="fromContainer">
|
|
13
13
|
<EmailFrom v-for="(sender, index) in from" :key="`from-${index}`"
|
|
14
14
|
:currentName="formattedName(sender.name, index, from.length, isOpen)"
|
|
15
15
|
:mail="formattedMail(sender.mail, index, from.length, isOpen)" :showMail="isOpen" />
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</template>
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
|
30
|
-
<span class="email-date" :title="formattedDate">
|
|
30
|
+
<span :class="`email-date ${isOpen ? isOpenClass : isClosedClass}`" :title="formattedDate" ref="emailDate">
|
|
31
31
|
<fa-icon :icon="['fas', 'calendar']" />
|
|
32
32
|
{{ formattedDate }}
|
|
33
33
|
</span>
|
|
@@ -129,6 +129,10 @@ export default {
|
|
|
129
129
|
},
|
|
130
130
|
refKey: {
|
|
131
131
|
type: String,
|
|
132
|
+
},
|
|
133
|
+
showRawMessageInsideEmail: {
|
|
134
|
+
type: Boolean,
|
|
135
|
+
default: false
|
|
132
136
|
}
|
|
133
137
|
},
|
|
134
138
|
data() {
|
|
@@ -178,6 +182,7 @@ export default {
|
|
|
178
182
|
},
|
|
179
183
|
mounted() {
|
|
180
184
|
this.updateIframeContent();
|
|
185
|
+
this.updateFromContainerMaxWidth()
|
|
181
186
|
|
|
182
187
|
if (this.refKey) this.$root.$refs[`${refKey}`] = this
|
|
183
188
|
},
|
|
@@ -194,6 +199,15 @@ export default {
|
|
|
194
199
|
}
|
|
195
200
|
})
|
|
196
201
|
},
|
|
202
|
+
updateFromContainerMaxWidth() {
|
|
203
|
+
this.$nextTick(() => {
|
|
204
|
+
const fromContainer = this.$refs.fromContainer
|
|
205
|
+
const emailDate = this.$refs.emailDate
|
|
206
|
+
if (!fromContainer || !emailDate) return
|
|
207
|
+
const MARGIN = 15
|
|
208
|
+
fromContainer.style.maxWidth = `calc(100% - ${emailDate.getBoundingClientRect().width + MARGIN}px)`
|
|
209
|
+
})
|
|
210
|
+
},
|
|
197
211
|
adjustIframeHeight() {
|
|
198
212
|
this.$nextTick(() => {
|
|
199
213
|
const iframe = this.$refs.emailIframe;
|
|
@@ -219,7 +233,21 @@ export default {
|
|
|
219
233
|
this.actionsOpen = !this.actionsOpen;
|
|
220
234
|
},
|
|
221
235
|
toggleOpenMessage() {
|
|
222
|
-
this.
|
|
236
|
+
if (this.showRawMessageInsideEmail) {
|
|
237
|
+
this.openMessage = !this.openMessage;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
this.$emit('open-message', {
|
|
241
|
+
dicionario: this.dicionario,
|
|
242
|
+
from: this.from,
|
|
243
|
+
para: this.para,
|
|
244
|
+
html: this.html,
|
|
245
|
+
assunto: this.assunto,
|
|
246
|
+
dataHora: this.dataHora,
|
|
247
|
+
mensagem: this.mensagem,
|
|
248
|
+
anexos: this.anexos,
|
|
249
|
+
dataServer: this.dataServer
|
|
250
|
+
})
|
|
223
251
|
},
|
|
224
252
|
closeActions() {
|
|
225
253
|
this.actionsOpen = false;
|
|
@@ -253,6 +281,8 @@ export default {
|
|
|
253
281
|
</style>
|
|
254
282
|
|
|
255
283
|
<style>
|
|
284
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
|
285
|
+
|
|
256
286
|
.bg-dark-white-2 {
|
|
257
287
|
background-color: #f7f7f7;
|
|
258
288
|
}
|
|
@@ -272,6 +302,7 @@ export default {
|
|
|
272
302
|
}
|
|
273
303
|
|
|
274
304
|
.email-item {
|
|
305
|
+
font-family: "Roboto", sans-serif;
|
|
275
306
|
flex: 1;
|
|
276
307
|
margin: 0 0 10px 0;
|
|
277
308
|
color: #222;
|
|
@@ -305,12 +336,12 @@ export default {
|
|
|
305
336
|
.header-container {
|
|
306
337
|
display: flex;
|
|
307
338
|
overflow: hidden;
|
|
339
|
+
position: relative;
|
|
308
340
|
}
|
|
309
341
|
|
|
310
342
|
.email-header-content {
|
|
311
343
|
display: flex;
|
|
312
344
|
align-items: center;
|
|
313
|
-
margin-right: 10px;
|
|
314
345
|
flex: 1;
|
|
315
346
|
min-width: 250px;
|
|
316
347
|
}
|
|
@@ -323,18 +354,19 @@ export default {
|
|
|
323
354
|
|
|
324
355
|
.email-subject {
|
|
325
356
|
margin: 0 0 5px 0;
|
|
326
|
-
font-
|
|
327
|
-
font-size: .95rem;
|
|
357
|
+
font-size: 1.025rem;
|
|
328
358
|
cursor: pointer;
|
|
329
359
|
}
|
|
330
360
|
|
|
331
361
|
.email-date {
|
|
332
362
|
--width: 245px;
|
|
333
363
|
font-size: .8rem;
|
|
334
|
-
margin-right: 10px;
|
|
335
364
|
text-overflow: ellipsis;
|
|
336
365
|
white-space: nowrap;
|
|
337
366
|
overflow: hidden;
|
|
367
|
+
position: absolute;
|
|
368
|
+
right: 0;
|
|
369
|
+
top: 0;
|
|
338
370
|
min-width: var(--width);
|
|
339
371
|
width: var(--width);
|
|
340
372
|
max-width: var(--width);
|
|
@@ -445,6 +477,8 @@ export default {
|
|
|
445
477
|
.email-to-from-container {
|
|
446
478
|
margin-bottom: 10px;
|
|
447
479
|
max-width: 100%;
|
|
480
|
+
min-width: 250px;
|
|
481
|
+
overflow: hidden;
|
|
448
482
|
display: flex;
|
|
449
483
|
flex-wrap: wrap;
|
|
450
484
|
flex: 1;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="
|
|
2
|
+
<div :class="emailToClass">
|
|
3
3
|
<p class="to" v-if="currentName" v-text="currentName" :title="currentName"></p>
|
|
4
4
|
<span class="additional" v-text="`<${mail}>`" :title="mail" v-if="showMail"></span>
|
|
5
5
|
</div>
|
|
@@ -46,6 +46,11 @@ export default {
|
|
|
46
46
|
type: Boolean,
|
|
47
47
|
required: false,
|
|
48
48
|
default: true
|
|
49
|
+
},
|
|
50
|
+
emailToClass: {
|
|
51
|
+
type: String,
|
|
52
|
+
required: false,
|
|
53
|
+
default: 'email-to'
|
|
49
54
|
}
|
|
50
55
|
}
|
|
51
56
|
}
|