vue-intergrall-plugins 1.1.11 → 1.1.12

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 (44) hide show
  1. package/README.md +220 -220
  2. package/dist/vue-intergrall-plugins.esm.js +52 -48
  3. package/dist/vue-intergrall-plugins.min.js +1 -1
  4. package/dist/vue-intergrall-plugins.ssr.js +125 -121
  5. package/package.json +66 -66
  6. package/src/lib-components/Buttons/IconButton.vue +27 -27
  7. package/src/lib-components/Buttons/SimpleButton.vue +140 -140
  8. package/src/lib-components/Cards/Card.vue +490 -490
  9. package/src/lib-components/Cards/CardCheck.vue +35 -35
  10. package/src/lib-components/Cards/CardFile.vue +163 -163
  11. package/src/lib-components/Chat/BtnDownloadAllFiles.vue +36 -36
  12. package/src/lib-components/Chat/BtnEmojis.vue +118 -118
  13. package/src/lib-components/Chat/BtnExpand.vue +17 -17
  14. package/src/lib-components/Chat/BtnFiles.vue +486 -486
  15. package/src/lib-components/Chat/BtnMic.vue +60 -60
  16. package/src/lib-components/Chat/BtnScreenShare.vue +31 -31
  17. package/src/lib-components/Chat/BtnStandardMessages.vue +17 -17
  18. package/src/lib-components/Chat/ExpandTextarea.vue +427 -427
  19. package/src/lib-components/Chat/MultipleFilePreview.vue +291 -291
  20. package/src/lib-components/Chat/Picker.vue +405 -405
  21. package/src/lib-components/Chat/RemainingCharacters.vue +28 -28
  22. package/src/lib-components/Chat/SingleFilePreview.vue +94 -94
  23. package/src/lib-components/Chat/SkeletonPicker.vue +110 -110
  24. package/src/lib-components/Chat/StandardMessages.vue +252 -252
  25. package/src/lib-components/Chat/TextFooter.vue +1007 -1007
  26. package/src/lib-components/Email/EmailExpanded.vue +270 -270
  27. package/src/lib-components/Email/EmailFile.vue +192 -192
  28. package/src/lib-components/Email/EmailFrom.vue +66 -66
  29. package/src/lib-components/Email/EmailItem.vue +937 -933
  30. package/src/lib-components/Email/EmailTo.vue +57 -57
  31. package/src/lib-components/Loader/Loader.vue +78 -78
  32. package/src/lib-components/Messages/AnexoMensagem.vue +415 -415
  33. package/src/lib-components/Messages/CardAttachment.vue +61 -61
  34. package/src/lib-components/Messages/CardMessages.vue +687 -687
  35. package/src/lib-components/Messages/InteratividadeBotoes.vue +199 -199
  36. package/src/lib-components/Messages/InteratividadeContato.vue +32 -32
  37. package/src/lib-components/Messages/InteratividadeContatoItem.vue +213 -213
  38. package/src/lib-components/Messages/InteratividadeFormulario.vue +334 -334
  39. package/src/lib-components/Messages/InteratividadePopup.vue +95 -95
  40. package/src/lib-components/Messages/LinkPreview.vue +176 -176
  41. package/src/lib-components/Scroll/ScrollContent.vue +166 -166
  42. package/src/lib-components/Templates/TemplateGenerator.vue +640 -640
  43. package/src/lib-components/Templates/TemplateMessage.vue +83 -83
  44. 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>