vue-intergrall-plugins 1.1.90 → 1.2.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.
Files changed (45) hide show
  1. package/README.md +220 -220
  2. package/dist/dist/vue-intergrall-plugins.css +1 -1
  3. package/dist/vue-intergrall-plugins.esm.js +193 -78
  4. package/dist/vue-intergrall-plugins.min.js +7 -7
  5. package/dist/vue-intergrall-plugins.ssr.js +245 -136
  6. package/package.json +61 -61
  7. package/src/lib-components/Buttons/IconButton.vue +27 -27
  8. package/src/lib-components/Buttons/SimpleButton.vue +140 -140
  9. package/src/lib-components/Cards/Card.vue +490 -490
  10. package/src/lib-components/Cards/CardCheck.vue +35 -35
  11. package/src/lib-components/Cards/CardFile.vue +163 -163
  12. package/src/lib-components/Chat/BtnDownloadAllFiles.vue +36 -36
  13. package/src/lib-components/Chat/BtnEmojis.vue +118 -118
  14. package/src/lib-components/Chat/BtnExpand.vue +17 -17
  15. package/src/lib-components/Chat/BtnFiles.vue +486 -486
  16. package/src/lib-components/Chat/BtnMic.vue +60 -60
  17. package/src/lib-components/Chat/BtnScreenShare.vue +31 -31
  18. package/src/lib-components/Chat/BtnStandardMessages.vue +17 -17
  19. package/src/lib-components/Chat/ExpandTextarea.vue +427 -427
  20. package/src/lib-components/Chat/MultipleFilePreview.vue +291 -291
  21. package/src/lib-components/Chat/Picker.vue +525 -525
  22. package/src/lib-components/Chat/RemainingCharacters.vue +28 -28
  23. package/src/lib-components/Chat/SingleFilePreview.vue +94 -94
  24. package/src/lib-components/Chat/SkeletonPicker.vue +110 -110
  25. package/src/lib-components/Chat/StandardMessages.vue +252 -252
  26. package/src/lib-components/Chat/TextFooter.vue +1007 -1007
  27. package/src/lib-components/Email/EmailExpanded.vue +270 -270
  28. package/src/lib-components/Email/EmailFile.vue +192 -192
  29. package/src/lib-components/Email/EmailFrom.vue +66 -66
  30. package/src/lib-components/Email/EmailItem.vue +867 -850
  31. package/src/lib-components/Email/EmailTo.vue +64 -64
  32. package/src/lib-components/Loader/Loader.vue +78 -78
  33. package/src/lib-components/Messages/AnexoMensagem.vue +534 -497
  34. package/src/lib-components/Messages/CardAttachment.vue +61 -61
  35. package/src/lib-components/Messages/CardMessages.vue +687 -687
  36. package/src/lib-components/Messages/InteratividadeBotoes.vue +197 -197
  37. package/src/lib-components/Messages/InteratividadeContato.vue +32 -32
  38. package/src/lib-components/Messages/InteratividadeContatoItem.vue +235 -235
  39. package/src/lib-components/Messages/InteratividadeFormulario.vue +334 -334
  40. package/src/lib-components/Messages/InteratividadePopup.vue +95 -95
  41. package/src/lib-components/Messages/LinkPreview.vue +176 -176
  42. package/src/lib-components/Scroll/ScrollContent.vue +166 -166
  43. package/src/lib-components/Templates/TemplateGenerator.vue +640 -640
  44. package/src/lib-components/Templates/TemplateMessage.vue +83 -83
  45. package/src/lib-components/Templates/TemplateSingle.vue +478 -478
@@ -1,35 +1,35 @@
1
- <template>
2
- <div>
3
- <transition name="fade" mode="out-in">
4
- <span class="card-reply" v-if="hasReply && (messageStatus == 'C' || messageStatus == 'T')" v-tippy :content="replyMessage ? replyMessage : 'Fazer reenvio da mensagem'" @click="$emit('reply-msg')"> <fa-icon :icon="['fas', 'reply']" /> </span>
5
- </transition>
6
- <transition name="fade" mode="out-in">
7
- <span class="card-check" v-if="messageStatus == 'D'" :content="tooltipContent" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
8
- <span class="card-check gray" v-else-if="messageStatus == 'Q'" :content="tooltipContent" v-tippy key="check-gray"> <fa-icon :icon="['fas', 'check']" /> </span>
9
- <span class="card-check black" v-else-if="messageStatus == 'G'" :content="tooltipContent" v-tippy key="check-black"> <fa-icon :icon="['fas', 'check']" /> </span>
10
- <span class="card-check black" v-else-if="messageStatus == 'E'" :content="tooltipContent" v-tippy key="double-check-black"> <fa-icon :icon="['fas', 'check-double']" /> </span>
11
- <span class="card-check seen" v-else-if="messageStatus == 'L'" :content="tooltipContent" v-tippy key="double-check-seen"> <fa-icon :icon="['fas', 'check-double']" /> </span> <!-- messageStatus finalizador -->
12
- <span class="card-check red" v-else-if="messageStatus == 'C'" :content="tooltipContent" v-tippy key="times-circle"> <fa-icon :icon="['fas', 'times-circle']" /> </span> <!-- messageStatus finalizador -->
13
- <span class="card-check red" v-else-if="messageStatus == 'T'" :content="tooltipContent" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
14
- </transition>
15
- </div>
16
- </template>
17
-
18
- <script>
19
- export default {
20
- props: {
21
- hasReply: {
22
- type: Boolean
23
- },
24
- messageStatus: {
25
- type: String
26
- },
27
- replyMessage: {
28
- type: String
29
- },
30
- tooltipContent: {
31
- type: String
32
- }
33
- }
34
- }
35
- </script>
1
+ <template>
2
+ <div>
3
+ <transition name="fade" mode="out-in">
4
+ <span class="card-reply" v-if="hasReply && (messageStatus == 'C' || messageStatus == 'T')" v-tippy :content="replyMessage ? replyMessage : 'Fazer reenvio da mensagem'" @click="$emit('reply-msg')"> <fa-icon :icon="['fas', 'reply']" /> </span>
5
+ </transition>
6
+ <transition name="fade" mode="out-in">
7
+ <span class="card-check" v-if="messageStatus == 'D'" :content="tooltipContent" v-tippy key="check-padrao"> <fa-icon :icon="['fas', 'check']" /> </span>
8
+ <span class="card-check gray" v-else-if="messageStatus == 'Q'" :content="tooltipContent" v-tippy key="check-gray"> <fa-icon :icon="['fas', 'check']" /> </span>
9
+ <span class="card-check black" v-else-if="messageStatus == 'G'" :content="tooltipContent" v-tippy key="check-black"> <fa-icon :icon="['fas', 'check']" /> </span>
10
+ <span class="card-check black" v-else-if="messageStatus == 'E'" :content="tooltipContent" v-tippy key="double-check-black"> <fa-icon :icon="['fas', 'check-double']" /> </span>
11
+ <span class="card-check seen" v-else-if="messageStatus == 'L'" :content="tooltipContent" v-tippy key="double-check-seen"> <fa-icon :icon="['fas', 'check-double']" /> </span> <!-- messageStatus finalizador -->
12
+ <span class="card-check red" v-else-if="messageStatus == 'C'" :content="tooltipContent" v-tippy key="times-circle"> <fa-icon :icon="['fas', 'times-circle']" /> </span> <!-- messageStatus finalizador -->
13
+ <span class="card-check red" v-else-if="messageStatus == 'T'" :content="tooltipContent" v-tippy key="hourglass"> <fa-icon :icon="['fas', 'hourglass']" /> </span> <!-- Status finalizador -->
14
+ </transition>
15
+ </div>
16
+ </template>
17
+
18
+ <script>
19
+ export default {
20
+ props: {
21
+ hasReply: {
22
+ type: Boolean
23
+ },
24
+ messageStatus: {
25
+ type: String
26
+ },
27
+ replyMessage: {
28
+ type: String
29
+ },
30
+ tooltipContent: {
31
+ type: String
32
+ }
33
+ }
34
+ }
35
+ </script>
@@ -1,163 +1,163 @@
1
- <template>
2
- <span class="file-item">
3
- <transition-group name="fade" mode="out-in" class="file-item-transition">
4
- <div v-if="isLoading" :small="true" key="card-file-loader" class="req-loader slow"></div>
5
- <template v-else>
6
- <span v-if="imageURL" class="file-img box-shadow" @click="openWindowFromURL(imageURL, true)" key="card-file-img"
7
- :title="filename">
8
- <img :src="`${imageURL}`" :alt="filename" />
9
- </span>
10
- <span v-else class="file-icon" key="card-file-doc" :class="[iconClass]"
11
- @click="openWindowFromURL(docURL, false)" :title="filename" target="_blank" rel="noreferrer noopener">
12
- <fa-icon :icon="icon" />
13
- </span>
14
- <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener"
15
- key="card-file-download-icon" :title="`Download ${filename}`">
16
- <fa-icon :icon="['fas', 'download']" />
17
- </a>
18
- </template>
19
- </transition-group>
20
- </span>
21
- </template>
22
-
23
- <style>
24
- .fade-enter-active,
25
- .fade-leave-active {
26
- transition: opacity .5s;
27
- }
28
-
29
- .fade-enter,
30
- .fade-leave-to {
31
- opacity: 0;
32
- }
33
- </style>
34
-
35
- <script>
36
- import { fileHandler } from "../../mixins/fileHandler"
37
-
38
- export default {
39
- mixins: [fileHandler],
40
- props: {
41
- file: {
42
- type: Object,
43
- required: true
44
- },
45
- dictionary: {
46
- type: Object,
47
- required: true
48
- },
49
- domain: {
50
- type: String,
51
- required: true
52
- }
53
- },
54
- mounted() {
55
- this.setFileVars(this.file, { dominio: this.domain })
56
- }
57
- }
58
- </script>
59
-
60
- <style scoped>
61
- .file-item {
62
- width: 100%;
63
- height: 100%;
64
- display: flex;
65
- justify-content: center;
66
- align-items: center;
67
- position: relative;
68
- }
69
-
70
- .file-item-transition {
71
- max-width: 100%;
72
- max-height: 100%;
73
- display: flex;
74
- justify-content: center;
75
- align-items: center;
76
- position: relative;
77
- }
78
-
79
- .file-item .req-loader {
80
- position: absolute;
81
- top: calc(50% - 12.5px);
82
- right: calc(50% - 12.5px);
83
- }
84
-
85
- .file-item-transition img {
86
- max-width: 45px;
87
- max-height: 45px;
88
- }
89
-
90
- .file-item a {
91
- margin-left: 5px;
92
- text-decoration: none;
93
- color: #333;
94
- }
95
-
96
- .file-icon {
97
- display: flex;
98
- justify-content: center;
99
- align-items: center;
100
- font-size: 30px;
101
- cursor: pointer;
102
- }
103
-
104
- .file-icon:hover {
105
- opacity: 1
106
- }
107
-
108
- .file-icon:visited {
109
- color: inherit;
110
- }
111
-
112
- .file-icon.pdf {
113
- position: relative;
114
- }
115
-
116
- .file-icon.pdf svg {
117
- color: rgb(231, 76, 60);
118
- }
119
-
120
- .file-icon.pdf::after {
121
- content: "";
122
- position: absolute;
123
- bottom: 2px;
124
- transform: translateY(2px);
125
- width: 20px;
126
- height: 20px;
127
- background-color: #FFF;
128
- }
129
-
130
- .file-icon.doc {
131
- color: #15517F;
132
- }
133
-
134
- .file-icon.doc::after {
135
- content: "";
136
- position: absolute;
137
- width: 20px;
138
- height: 20px;
139
- background-color: #FFF;
140
- }
141
-
142
- .file-img {
143
- display: flex;
144
- justify-content: center;
145
- align-items: center;
146
- width: 100%;
147
- height: 100%;
148
- overflow: hidden;
149
- background-color: rgba(0, 0, 0, .2);
150
- border-radius: 2.5px;
151
- cursor: pointer;
152
- opacity: .9;
153
- transition: opacity 150ms;
154
- }
155
-
156
- .file-img:hover {
157
- opacity: 1;
158
- }
159
-
160
- .file-img img {
161
- width: 95%;
162
- }
163
- </style>
1
+ <template>
2
+ <span class="file-item">
3
+ <transition-group name="fade" mode="out-in" class="file-item-transition">
4
+ <div v-if="isLoading" :small="true" key="card-file-loader" class="req-loader slow"></div>
5
+ <template v-else>
6
+ <span v-if="imageURL" class="file-img box-shadow" @click="openWindowFromURL(imageURL, true)" key="card-file-img"
7
+ :title="filename">
8
+ <img :src="`${imageURL}`" :alt="filename" />
9
+ </span>
10
+ <span v-else class="file-icon" key="card-file-doc" :class="[iconClass]"
11
+ @click="openWindowFromURL(docURL, false)" :title="filename" target="_blank" rel="noreferrer noopener">
12
+ <fa-icon :icon="icon" />
13
+ </span>
14
+ <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener"
15
+ key="card-file-download-icon" :title="`Download ${filename}`">
16
+ <fa-icon :icon="['fas', 'download']" />
17
+ </a>
18
+ </template>
19
+ </transition-group>
20
+ </span>
21
+ </template>
22
+
23
+ <style>
24
+ .fade-enter-active,
25
+ .fade-leave-active {
26
+ transition: opacity .5s;
27
+ }
28
+
29
+ .fade-enter,
30
+ .fade-leave-to {
31
+ opacity: 0;
32
+ }
33
+ </style>
34
+
35
+ <script>
36
+ import { fileHandler } from "../../mixins/fileHandler"
37
+
38
+ export default {
39
+ mixins: [fileHandler],
40
+ props: {
41
+ file: {
42
+ type: Object,
43
+ required: true
44
+ },
45
+ dictionary: {
46
+ type: Object,
47
+ required: true
48
+ },
49
+ domain: {
50
+ type: String,
51
+ required: true
52
+ }
53
+ },
54
+ mounted() {
55
+ this.setFileVars(this.file, { dominio: this.domain })
56
+ }
57
+ }
58
+ </script>
59
+
60
+ <style scoped>
61
+ .file-item {
62
+ width: 100%;
63
+ height: 100%;
64
+ display: flex;
65
+ justify-content: center;
66
+ align-items: center;
67
+ position: relative;
68
+ }
69
+
70
+ .file-item-transition {
71
+ max-width: 100%;
72
+ max-height: 100%;
73
+ display: flex;
74
+ justify-content: center;
75
+ align-items: center;
76
+ position: relative;
77
+ }
78
+
79
+ .file-item .req-loader {
80
+ position: absolute;
81
+ top: calc(50% - 12.5px);
82
+ right: calc(50% - 12.5px);
83
+ }
84
+
85
+ .file-item-transition img {
86
+ max-width: 45px;
87
+ max-height: 45px;
88
+ }
89
+
90
+ .file-item a {
91
+ margin-left: 5px;
92
+ text-decoration: none;
93
+ color: #333;
94
+ }
95
+
96
+ .file-icon {
97
+ display: flex;
98
+ justify-content: center;
99
+ align-items: center;
100
+ font-size: 30px;
101
+ cursor: pointer;
102
+ }
103
+
104
+ .file-icon:hover {
105
+ opacity: 1
106
+ }
107
+
108
+ .file-icon:visited {
109
+ color: inherit;
110
+ }
111
+
112
+ .file-icon.pdf {
113
+ position: relative;
114
+ }
115
+
116
+ .file-icon.pdf svg {
117
+ color: rgb(231, 76, 60);
118
+ }
119
+
120
+ .file-icon.pdf::after {
121
+ content: "";
122
+ position: absolute;
123
+ bottom: 2px;
124
+ transform: translateY(2px);
125
+ width: 20px;
126
+ height: 20px;
127
+ background-color: #FFF;
128
+ }
129
+
130
+ .file-icon.doc {
131
+ color: #15517F;
132
+ }
133
+
134
+ .file-icon.doc::after {
135
+ content: "";
136
+ position: absolute;
137
+ width: 20px;
138
+ height: 20px;
139
+ background-color: #FFF;
140
+ }
141
+
142
+ .file-img {
143
+ display: flex;
144
+ justify-content: center;
145
+ align-items: center;
146
+ width: 100%;
147
+ height: 100%;
148
+ overflow: hidden;
149
+ background-color: rgba(0, 0, 0, .2);
150
+ border-radius: 2.5px;
151
+ cursor: pointer;
152
+ opacity: .9;
153
+ transition: opacity 150ms;
154
+ }
155
+
156
+ .file-img:hover {
157
+ opacity: 1;
158
+ }
159
+
160
+ .file-img img {
161
+ width: 95%;
162
+ }
163
+ </style>
@@ -1,36 +1,36 @@
1
- <template>
2
- <div
3
- class="text-footer-actions--btn"
4
- @click="$emit('click-trigger')"
5
- :title="dictionary.msg_baixar_todos_anexos"
6
- >
7
- <span class="multiplos">
8
- <fa-icon :icon="['fas', 'download']" />
9
- <fa-icon :icon="['fas', 'paperclip']" class="small" />
10
- </span>
11
- </div>
12
- </template>
13
-
14
- <style>
15
- .multiplos {
16
- display: flex;
17
- }
18
- .multiplos svg {
19
- font-size: 15.2px;
20
- }
21
- .multiplos svg.small {
22
- font-size: 11.2px !important;
23
- }
24
- </style>
25
-
26
- <script>
27
- export default {
28
- props: {
29
- dictionary: {
30
- type: Object,
31
- default: {},
32
- required: false,
33
- },
34
- },
35
- };
36
- </script>
1
+ <template>
2
+ <div
3
+ class="text-footer-actions--btn"
4
+ @click="$emit('click-trigger')"
5
+ :title="dictionary.msg_baixar_todos_anexos"
6
+ >
7
+ <span class="multiplos">
8
+ <fa-icon :icon="['fas', 'download']" />
9
+ <fa-icon :icon="['fas', 'paperclip']" class="small" />
10
+ </span>
11
+ </div>
12
+ </template>
13
+
14
+ <style>
15
+ .multiplos {
16
+ display: flex;
17
+ }
18
+ .multiplos svg {
19
+ font-size: 15.2px;
20
+ }
21
+ .multiplos svg.small {
22
+ font-size: 11.2px !important;
23
+ }
24
+ </style>
25
+
26
+ <script>
27
+ export default {
28
+ props: {
29
+ dictionary: {
30
+ type: Object,
31
+ default: {},
32
+ required: false,
33
+ },
34
+ },
35
+ };
36
+ </script>