vue-intergrall-plugins 0.0.280 → 0.0.282

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 (40) hide show
  1. package/README.md +185 -185
  2. package/dist/vue-intergrall-plugins.esm.js +94 -58
  3. package/dist/vue-intergrall-plugins.min.js +1 -1
  4. package/dist/vue-intergrall-plugins.ssr.js +133 -124
  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 +412 -412
  9. package/src/lib-components/Cards/CardCheck.vue +35 -35
  10. package/src/lib-components/Cards/CardFile.vue +157 -157
  11. package/src/lib-components/Chat/BtnDownloadAllFiles.vue +32 -32
  12. package/src/lib-components/Chat/BtnEmojis.vue +124 -124
  13. package/src/lib-components/Chat/BtnExpand.vue +17 -17
  14. package/src/lib-components/Chat/BtnFiles.vue +415 -415
  15. package/src/lib-components/Chat/BtnMic.vue +60 -60
  16. package/src/lib-components/Chat/BtnScreenShare.vue +32 -32
  17. package/src/lib-components/Chat/BtnStandardMessages.vue +17 -17
  18. package/src/lib-components/Chat/ExpandTextarea.vue +410 -410
  19. package/src/lib-components/Chat/MultipleFilePreview.vue +266 -266
  20. package/src/lib-components/Chat/Picker.vue +368 -368
  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 +245 -245
  25. package/src/lib-components/Chat/TextFooter.vue +817 -817
  26. package/src/lib-components/Email/EmailFile.vue +125 -125
  27. package/src/lib-components/Email/EmailItem.vue +185 -185
  28. package/src/lib-components/Loader/Loader.vue +78 -78
  29. package/src/lib-components/Messages/AnexoMensagem.vue +384 -384
  30. package/src/lib-components/Messages/CardAttachment.vue +61 -61
  31. package/src/lib-components/Messages/CardMessages.vue +460 -393
  32. package/src/lib-components/Messages/ChatMessages.vue +573 -573
  33. package/src/lib-components/Messages/InteratividadeBotoes.vue +165 -165
  34. package/src/lib-components/Messages/InteratividadeFormulario.vue +392 -392
  35. package/src/lib-components/Messages/InteratividadePopup.vue +88 -88
  36. package/src/lib-components/Messages/LinkPreview.vue +163 -163
  37. package/src/lib-components/Scroll/ScrollContent.vue +150 -150
  38. package/src/lib-components/Templates/TemplateGenerator.vue +576 -576
  39. package/src/lib-components/Templates/TemplateMessage.vue +83 -83
  40. package/src/lib-components/Templates/TemplateSingle.vue +481 -481
@@ -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,157 +1,157 @@
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" :title="filename">
7
- <img :src="`${imageURL}`" :alt="filename" />
8
- </span>
9
- <span
10
- v-else
11
- class="file-icon"
12
- key="card-file-doc"
13
- :class="[iconClass]"
14
- @click="openWindowFromURL(docURL, false)"
15
- :title="filename"
16
- target="_blank"
17
- rel="noreferrer noopener"
18
- >
19
- <fa-icon :icon="icon" />
20
- </span>
21
- <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener" key="card-file-download-icon" :title="`Download ${filename}`">
22
- <fa-icon :icon="['fas', 'download']" />
23
- </a>
24
- </template>
25
- </transition-group>
26
- </span>
27
- </template>
28
-
29
- <style scoped>
30
- .fade-enter-active, .fade-leave-active {
31
- transition: opacity .5s;
32
- }
33
- .fade-enter, .fade-leave-to {
34
- opacity: 0;
35
- }
36
- </style>
37
-
38
- <script>
39
- import { fileHandler } from "../../mixins/fileHandler"
40
-
41
- export default {
42
- mixins: [fileHandler],
43
- props: {
44
- file: {
45
- type: Object,
46
- required: true
47
- },
48
- dictionary: {
49
- type: Object,
50
- required: true
51
- },
52
- domain: {
53
- type: String,
54
- required: true
55
- }
56
- },
57
- mounted(){
58
- this.setFileVars(this.file, { dominio: this.domain })
59
- }
60
- }
61
- </script>
62
-
63
- <style>
64
- .file-item {
65
- width: 100%;
66
- height: 100%;
67
- display: flex;
68
- justify-content: center;
69
- align-items: center;
70
- position: relative;
71
- }
72
- .file-item-transition {
73
- max-width: 100%;
74
- max-height: 100%;
75
- display: flex;
76
- justify-content: center;
77
- align-items: center;
78
- position: relative;
79
- }
80
- .file-item .req-loader {
81
- position: absolute;
82
- top: calc(50% - 12.5px);
83
- right: calc(50% - 12.5px);
84
- }
85
- .file-item-transition img {
86
- max-width: 45px;
87
- max-height: 45px;
88
- }
89
- .file-item a {
90
- margin-left: 5px;
91
- text-decoration: none;
92
- color: #333;
93
- }
94
-
95
- .file-icon {
96
- display: flex;
97
- justify-content: center;
98
- align-items: center;
99
- font-size: 30px;
100
- cursor: pointer;
101
- }
102
- .file-icon:hover {
103
- opacity: 1
104
- }
105
- .file-icon:visited {
106
- color: inherit;
107
- }
108
- svg {
109
- font-size: 30px;
110
- z-index: 1;
111
- }
112
- .file-icon.pdf {
113
- position: relative;
114
- }
115
- .file-icon.pdf svg {
116
- color: rgb(231, 76, 60);
117
- }
118
- .file-icon.pdf::after {
119
- content: "";
120
- position: absolute;
121
- bottom: 2px;
122
- transform: translateY(2px);
123
- width: 20px;
124
- height: 20px;
125
- background-color: #FFF;
126
- }
127
- .file-icon.doc {
128
- color: #15517F;
129
- }
130
- .file-icon.doc::after {
131
- content: "";
132
- position: absolute;
133
- width: 20px;
134
- height: 20px;
135
- background-color: #FFF;
136
- }
137
- .file-img {
138
- display: flex;
139
- justify-content: center;
140
- align-items: center;
141
- width: 100%;
142
- height: 100%;
143
- overflow: hidden;
144
- background-color: rgba(0, 0, 0, .2);
145
- border-radius: 2.5px;
146
- cursor: pointer;
147
- opacity: .9;
148
- transition: opacity 150ms;
149
- }
150
-
151
- .file-img:hover {
152
- opacity: 1;
153
- }
154
- .file-img img {
155
- width: 95%;
156
- }
157
- </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" :title="filename">
7
+ <img :src="`${imageURL}`" :alt="filename" />
8
+ </span>
9
+ <span
10
+ v-else
11
+ class="file-icon"
12
+ key="card-file-doc"
13
+ :class="[iconClass]"
14
+ @click="openWindowFromURL(docURL, false)"
15
+ :title="filename"
16
+ target="_blank"
17
+ rel="noreferrer noopener"
18
+ >
19
+ <fa-icon :icon="icon" />
20
+ </span>
21
+ <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" rel="noreferrer noopener" key="card-file-download-icon" :title="`Download ${filename}`">
22
+ <fa-icon :icon="['fas', 'download']" />
23
+ </a>
24
+ </template>
25
+ </transition-group>
26
+ </span>
27
+ </template>
28
+
29
+ <style scoped>
30
+ .fade-enter-active, .fade-leave-active {
31
+ transition: opacity .5s;
32
+ }
33
+ .fade-enter, .fade-leave-to {
34
+ opacity: 0;
35
+ }
36
+ </style>
37
+
38
+ <script>
39
+ import { fileHandler } from "../../mixins/fileHandler"
40
+
41
+ export default {
42
+ mixins: [fileHandler],
43
+ props: {
44
+ file: {
45
+ type: Object,
46
+ required: true
47
+ },
48
+ dictionary: {
49
+ type: Object,
50
+ required: true
51
+ },
52
+ domain: {
53
+ type: String,
54
+ required: true
55
+ }
56
+ },
57
+ mounted(){
58
+ this.setFileVars(this.file, { dominio: this.domain })
59
+ }
60
+ }
61
+ </script>
62
+
63
+ <style>
64
+ .file-item {
65
+ width: 100%;
66
+ height: 100%;
67
+ display: flex;
68
+ justify-content: center;
69
+ align-items: center;
70
+ position: relative;
71
+ }
72
+ .file-item-transition {
73
+ max-width: 100%;
74
+ max-height: 100%;
75
+ display: flex;
76
+ justify-content: center;
77
+ align-items: center;
78
+ position: relative;
79
+ }
80
+ .file-item .req-loader {
81
+ position: absolute;
82
+ top: calc(50% - 12.5px);
83
+ right: calc(50% - 12.5px);
84
+ }
85
+ .file-item-transition img {
86
+ max-width: 45px;
87
+ max-height: 45px;
88
+ }
89
+ .file-item a {
90
+ margin-left: 5px;
91
+ text-decoration: none;
92
+ color: #333;
93
+ }
94
+
95
+ .file-icon {
96
+ display: flex;
97
+ justify-content: center;
98
+ align-items: center;
99
+ font-size: 30px;
100
+ cursor: pointer;
101
+ }
102
+ .file-icon:hover {
103
+ opacity: 1
104
+ }
105
+ .file-icon:visited {
106
+ color: inherit;
107
+ }
108
+ svg {
109
+ font-size: 30px;
110
+ z-index: 1;
111
+ }
112
+ .file-icon.pdf {
113
+ position: relative;
114
+ }
115
+ .file-icon.pdf svg {
116
+ color: rgb(231, 76, 60);
117
+ }
118
+ .file-icon.pdf::after {
119
+ content: "";
120
+ position: absolute;
121
+ bottom: 2px;
122
+ transform: translateY(2px);
123
+ width: 20px;
124
+ height: 20px;
125
+ background-color: #FFF;
126
+ }
127
+ .file-icon.doc {
128
+ color: #15517F;
129
+ }
130
+ .file-icon.doc::after {
131
+ content: "";
132
+ position: absolute;
133
+ width: 20px;
134
+ height: 20px;
135
+ background-color: #FFF;
136
+ }
137
+ .file-img {
138
+ display: flex;
139
+ justify-content: center;
140
+ align-items: center;
141
+ width: 100%;
142
+ height: 100%;
143
+ overflow: hidden;
144
+ background-color: rgba(0, 0, 0, .2);
145
+ border-radius: 2.5px;
146
+ cursor: pointer;
147
+ opacity: .9;
148
+ transition: opacity 150ms;
149
+ }
150
+
151
+ .file-img:hover {
152
+ opacity: 1;
153
+ }
154
+ .file-img img {
155
+ width: 95%;
156
+ }
157
+ </style>
@@ -1,32 +1,32 @@
1
- <template>
2
- <div class="text-footer-actions--btn" @click="$emit('click-trigger')" :title="dictionary.msg_baixar_todos_anexos">
3
- <span class="multiplos">
4
- <fa-icon :icon="['fas', 'download']" />
5
- <fa-icon :icon="['fas', 'paperclip']" class="small" />
6
- </span>
7
- </div>
8
- </template>
9
-
10
- <style scoped>
11
- .multiplos {
12
- display: flex;
13
- }
14
- .multiplos svg {
15
- font-size: .95rem
16
- }
17
- .multiplos svg.small {
18
- font-size: .7rem!important;
19
- }
20
- </style>
21
-
22
- <script>
23
- export default {
24
- props: {
25
- dictionary: {
26
- type: Object,
27
- default: {},
28
- required: false
29
- }
30
- }
31
- }
32
- </script>
1
+ <template>
2
+ <div class="text-footer-actions--btn" @click="$emit('click-trigger')" :title="dictionary.msg_baixar_todos_anexos">
3
+ <span class="multiplos">
4
+ <fa-icon :icon="['fas', 'download']" />
5
+ <fa-icon :icon="['fas', 'paperclip']" class="small" />
6
+ </span>
7
+ </div>
8
+ </template>
9
+
10
+ <style scoped>
11
+ .multiplos {
12
+ display: flex;
13
+ }
14
+ .multiplos svg {
15
+ font-size: .95rem
16
+ }
17
+ .multiplos svg.small {
18
+ font-size: .7rem!important;
19
+ }
20
+ </style>
21
+
22
+ <script>
23
+ export default {
24
+ props: {
25
+ dictionary: {
26
+ type: Object,
27
+ default: {},
28
+ required: false
29
+ }
30
+ }
31
+ }
32
+ </script>