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