vue-intergrall-plugins 0.0.504 → 0.0.510

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 (41) hide show
  1. package/README.md +185 -185
  2. package/dist/vue-intergrall-plugins.esm.js +596 -513
  3. package/dist/vue-intergrall-plugins.min.js +1 -1
  4. package/dist/vue-intergrall-plugins.ssr.js +607 -541
  5. package/package.json +67 -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 +429 -429
  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 +36 -36
  12. package/src/lib-components/Chat/BtnEmojis.vue +131 -131
  13. package/src/lib-components/Chat/BtnExpand.vue +17 -17
  14. package/src/lib-components/Chat/BtnFiles.vue +541 -541
  15. package/src/lib-components/Chat/BtnMic.vue +60 -60
  16. package/src/lib-components/Chat/BtnScreenShare.vue +36 -36
  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 +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 +245 -245
  25. package/src/lib-components/Chat/TextFooter.vue +1030 -1030
  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 +442 -442
  30. package/src/lib-components/Messages/CardAttachment.vue +61 -61
  31. package/src/lib-components/Messages/CardMessages.vue +666 -666
  32. package/src/lib-components/Messages/ChatMessages.vue +1082 -1077
  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/Midea/Player.vue +25 -0
  38. package/src/lib-components/Scroll/ScrollContent.vue +166 -166
  39. package/src/lib-components/Templates/TemplateGenerator.vue +576 -576
  40. package/src/lib-components/Templates/TemplateMessage.vue +83 -83
  41. package/src/lib-components/Templates/TemplateSingle.vue +481 -481
@@ -1,126 +1,126 @@
1
- <template>
2
- <transition-group name="fade" mode="out-in">
3
- <VueLoader v-if="isLoading" key="file-loader" />
4
- <div v-else key="file-container" class="mb-5 mx-5 d-flex flex-wrap align-items-center">
5
- <span v-if="imageURL" class="anexo-img box-shadow" @click="openWindowFromURL(imageURL, true)" :title="`Visualizar ${filename}`">
6
- <img :src="`${imageURL}`" :alt="filename" />
7
- </span>
8
- <span
9
- v-else
10
- class="anexo-icone mr-5"
11
- :class="[iconClass]"
12
- @click="openWindowFromURL(docURL, false)"
13
- :title="`Visualizar ${filename}`"
14
- target="_blank"
15
- >
16
- <fa-icon :icon="icon" />
17
- </span>
18
- <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" :title="`Download ${filename}`">
19
- <fa-icon :icon="['fas', 'download']" />
20
- </a>
21
- </div>
22
- </transition-group>
23
- </template>
24
-
25
- <script>
26
- import { fileHandler } from "@/mixins/fileHandler"
27
-
28
- export default {
29
- mixins: [fileHandler],
30
- props: {
31
- anexo: {
32
- type: [Object, String],
33
- default: () => { return {} }
34
- },
35
- dominio: {
36
- type: String,
37
- required: true
38
- }
39
- },
40
- mounted() {
41
- this.setFileVars(this.anexo, { dominio: this.dominio })
42
- },
43
- }
44
- </script>
45
- <style scoped>
46
- .mr-5 {
47
- margin-right: 5px;
48
- }
49
- .anexo-img {
50
- display: flex;
51
- justify-content: center;
52
- align-items: center;
53
- width: 100%;
54
- height: 100%;
55
- overflow: hidden;
56
- background-color: rgba(0, 0, 0, .2);
57
- border-radius: 2.5px;
58
- cursor: pointer;
59
- opacity: .9;
60
- transition: opacity 150ms;
61
- }
62
- .anexo-img:hover {
63
- opacity: 1;
64
- }
65
- .anexo-img img {
66
- width: 95%;
67
- max-height: 50px;
68
- }
69
- .box-shadow {
70
- -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
71
- -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
72
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
73
- }
74
- .anexo-icone {
75
- display: flex;
76
- justify-content: center;
77
- align-items: center;
78
- font-size: 30px;
79
- cursor: pointer;
80
- }
81
- .anexo-icone:hover {
82
- opacity: 1
83
- }
84
- .anexo-icone:visited {
85
- color: inherit;
86
- }
87
- .anexo-icone.pdf {
88
- position: relative;
89
- }
90
- .anexo-icone.pdf svg {
91
- color: rgb(231, 76, 60);
92
- }
93
- .anexo-icone.pdf::after {
94
- content: "";
95
- position: absolute;
96
- bottom: 2px;
97
- transform: translateY(2px);
98
- width: 20px;
99
- height: 20px;
100
- }
101
- .anexo-icone.doc {
102
- color: #15517F;
103
- }
104
- .anexo-icone.doc::after {
105
- content: "";
106
- position: absolute;
107
- width: 20px;
108
- height: 20px;
109
- }
110
- .align-items-center {
111
- align-items: center;
112
- }
113
- .flex-wrap {
114
- flex-wrap: wrap;
115
- }
116
- .d-flex {
117
- display: flex;
118
- }
119
- .mb-5 {
120
- margin-bottom: 5px;
121
- }
122
- .mx-5 {
123
- margin-left: 5px;
124
- margin-right: 5px;
125
- }
1
+ <template>
2
+ <transition-group name="fade" mode="out-in">
3
+ <VueLoader v-if="isLoading" key="file-loader" />
4
+ <div v-else key="file-container" class="mb-5 mx-5 d-flex flex-wrap align-items-center">
5
+ <span v-if="imageURL" class="anexo-img box-shadow" @click="openWindowFromURL(imageURL, true)" :title="`Visualizar ${filename}`">
6
+ <img :src="`${imageURL}`" :alt="filename" />
7
+ </span>
8
+ <span
9
+ v-else
10
+ class="anexo-icone mr-5"
11
+ :class="[iconClass]"
12
+ @click="openWindowFromURL(docURL, false)"
13
+ :title="`Visualizar ${filename}`"
14
+ target="_blank"
15
+ >
16
+ <fa-icon :icon="icon" />
17
+ </span>
18
+ <a :href="imageURL ? imageURL : docURL" :download="`${filename}`" target="_blank" :title="`Download ${filename}`">
19
+ <fa-icon :icon="['fas', 'download']" />
20
+ </a>
21
+ </div>
22
+ </transition-group>
23
+ </template>
24
+
25
+ <script>
26
+ import { fileHandler } from "@/mixins/fileHandler"
27
+
28
+ export default {
29
+ mixins: [fileHandler],
30
+ props: {
31
+ anexo: {
32
+ type: [Object, String],
33
+ default: () => { return {} }
34
+ },
35
+ dominio: {
36
+ type: String,
37
+ required: true
38
+ }
39
+ },
40
+ mounted() {
41
+ this.setFileVars(this.anexo, { dominio: this.dominio })
42
+ },
43
+ }
44
+ </script>
45
+ <style scoped>
46
+ .mr-5 {
47
+ margin-right: 5px;
48
+ }
49
+ .anexo-img {
50
+ display: flex;
51
+ justify-content: center;
52
+ align-items: center;
53
+ width: 100%;
54
+ height: 100%;
55
+ overflow: hidden;
56
+ background-color: rgba(0, 0, 0, .2);
57
+ border-radius: 2.5px;
58
+ cursor: pointer;
59
+ opacity: .9;
60
+ transition: opacity 150ms;
61
+ }
62
+ .anexo-img:hover {
63
+ opacity: 1;
64
+ }
65
+ .anexo-img img {
66
+ width: 95%;
67
+ max-height: 50px;
68
+ }
69
+ .box-shadow {
70
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
71
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
72
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
73
+ }
74
+ .anexo-icone {
75
+ display: flex;
76
+ justify-content: center;
77
+ align-items: center;
78
+ font-size: 30px;
79
+ cursor: pointer;
80
+ }
81
+ .anexo-icone:hover {
82
+ opacity: 1
83
+ }
84
+ .anexo-icone:visited {
85
+ color: inherit;
86
+ }
87
+ .anexo-icone.pdf {
88
+ position: relative;
89
+ }
90
+ .anexo-icone.pdf svg {
91
+ color: rgb(231, 76, 60);
92
+ }
93
+ .anexo-icone.pdf::after {
94
+ content: "";
95
+ position: absolute;
96
+ bottom: 2px;
97
+ transform: translateY(2px);
98
+ width: 20px;
99
+ height: 20px;
100
+ }
101
+ .anexo-icone.doc {
102
+ color: #15517F;
103
+ }
104
+ .anexo-icone.doc::after {
105
+ content: "";
106
+ position: absolute;
107
+ width: 20px;
108
+ height: 20px;
109
+ }
110
+ .align-items-center {
111
+ align-items: center;
112
+ }
113
+ .flex-wrap {
114
+ flex-wrap: wrap;
115
+ }
116
+ .d-flex {
117
+ display: flex;
118
+ }
119
+ .mb-5 {
120
+ margin-bottom: 5px;
121
+ }
122
+ .mx-5 {
123
+ margin-left: 5px;
124
+ margin-right: 5px;
125
+ }
126
126
  </style>
@@ -1,186 +1,186 @@
1
- <template>
2
- <div class="w-100 text-dark min-h-60 d-flex flex-wrap px-35 border-bottom-1 border-color-gray transition-150">
3
- <div class="w-100 d-flex d-flex align-items-center justify-content-between cursor-pointer" @click="toggleEstado()">
4
- <div class="d-flex-center m-10">
5
- <span class="align-self-start border-radius-round d-flex-center w-36px h-36px border-color-gray border-1 mr-10" v-text="siglaNome"></span>
6
- <div class="d-flex flex-column">
7
- <p class="text-bold fs-_9" v-text="de" :title="de"></p>
8
- <p v-if="estado != 0" class="text-gray fs-_8" v-text="para" :title="para"></p>
9
- <p class="text-gray fs-_8" v-text="tratarTextoLongo(assunto, 30)" :title="assunto"></p>
10
- </div>
11
- </div>
12
- <span class="fs-_8 mr-10 text-ellipsis" :title="formataDataHora(dataHora)">
13
- <fa-icon :icon="['fas', 'calendar']" />
14
- {{ formataDataHora(dataHora) }}
15
- </span>
16
- </div>
17
- <div class="d-flex-center w-100 p-15" v-if="estado != 0">
18
- <section v-html="html"></section>
19
- </div>
20
- <template v-if="anexos && anexos.length">
21
- <EmailFile
22
- class="d-flex flex-wrap align-items-center"
23
- v-for="(anexo, index) in anexos" :key="index"
24
- :anexo="anexo"
25
- :dominio="dominio"
26
- />
27
- </template>
28
- </div>
29
- </template>
30
-
31
- <script>
32
- import EmailFile from "./EmailFile.vue"
33
- import { textoLongo } from "@/mixins/formatarTexto"
34
-
35
- export default {
36
- mixins: [textoLongo],
37
- components: { EmailFile },
38
- props: {
39
- dominio: {
40
- type: String,
41
- required: true
42
- },
43
- dicionario: {
44
- type: Object,
45
- required: true
46
- },
47
- de: {
48
- type: String,
49
- required: false,
50
- default: ""
51
- },
52
- para: {
53
- type: String,
54
- required: false,
55
- default: ""
56
- },
57
- html: {
58
- type: String,
59
- required: false,
60
- default: ""
61
- },
62
- assunto: {
63
- type: String,
64
- required: false,
65
- default: ""
66
- },
67
- dataHora: {
68
- type: String,
69
- required: false,
70
- default: ""
71
- },
72
- mensagem: {
73
- type: String,
74
- required: false,
75
- default: ""
76
- },
77
- anexos: {
78
- type: [Array, String],
79
- required: false,
80
- default: () => { return [] }
81
- },
82
- iniciarAberto: {
83
- type: Boolean,
84
- required: false,
85
- default: false
86
- }
87
- },
88
- data() {
89
- return {
90
- estado: 0
91
- }
92
- },
93
- computed: {
94
- siglaNome() {
95
- return this.de[0] ? this.de[0].toUpperCase() : ""
96
- }
97
- },
98
- methods: {
99
- toggleEstado() {
100
- this.estado = this.estado == 0 ? 1 : 0
101
- }
102
- }
103
- }
104
- </script>
105
- <style scoped>
106
- .w-100 {
107
- width: 100%;
108
- }
109
- .text-dark {
110
- color: #333
111
- }
112
- .min-h-60 {
113
- min-height: 60px;
114
- }
115
- .d-flex {
116
- display: flex;
117
- }
118
- .flex-wrap {
119
- flex-wrap: wrap;
120
- }
121
- .border-bottom-1 {
122
- border-bottom: 1px solid;
123
- }
124
- .border-color-gray {
125
- border-color: #CCC
126
- }
127
- .transition-150 {
128
- transition: all 150ms ease-in-out;
129
- }
130
- .cursor-pointer {
131
- cursor: pointer;
132
- }
133
- .justify-content-between {
134
- justify-content: space-between;
135
- }
136
- .align-items-center {
137
- align-items: center;
138
- }
139
- .align-self-start {
140
- align-self: flex-start;
141
- }
142
- .border-radius-round {
143
- border-radius: 50%!important;
144
- }
145
- .w-36px {
146
- width: 36px;
147
- }
148
- .h-36px {
149
- height: 36px;
150
- }
151
- .border-1 {
152
- border: 1px solid;
153
- }
154
- .mr-10 {
155
- margin-right: 10px;
156
- }
157
- .flex-column {
158
- display: flex;
159
- flex-direction: column
160
- }
161
- .text-bold {
162
- font-weight: bold;
163
- }
164
- .fs-_9 {
165
- font-size: 14.4px;
166
- }
167
- .fs-_8 {
168
- font-size: 12.8px;
169
- }
170
- .text-gray {
171
- color: gray;
172
- }
173
- .p-15 {
174
- padding: 15px;
175
- }
176
- .text-ellipsis{
177
- white-space: nowrap;
178
- text-overflow: ellipsis;
179
- overflow: hidden
180
- }
181
- .d-flex-center{
182
- display: flex;
183
- justify-content: center;
184
- align-items: center
185
- }
1
+ <template>
2
+ <div class="w-100 text-dark min-h-60 d-flex flex-wrap px-35 border-bottom-1 border-color-gray transition-150">
3
+ <div class="w-100 d-flex d-flex align-items-center justify-content-between cursor-pointer" @click="toggleEstado()">
4
+ <div class="d-flex-center m-10">
5
+ <span class="align-self-start border-radius-round d-flex-center w-36px h-36px border-color-gray border-1 mr-10" v-text="siglaNome"></span>
6
+ <div class="d-flex flex-column">
7
+ <p class="text-bold fs-_9" v-text="de" :title="de"></p>
8
+ <p v-if="estado != 0" class="text-gray fs-_8" v-text="para" :title="para"></p>
9
+ <p class="text-gray fs-_8" v-text="tratarTextoLongo(assunto, 30)" :title="assunto"></p>
10
+ </div>
11
+ </div>
12
+ <span class="fs-_8 mr-10 text-ellipsis" :title="formataDataHora(dataHora)">
13
+ <fa-icon :icon="['fas', 'calendar']" />
14
+ {{ formataDataHora(dataHora) }}
15
+ </span>
16
+ </div>
17
+ <div class="d-flex-center w-100 p-15" v-if="estado != 0">
18
+ <section v-html="html"></section>
19
+ </div>
20
+ <template v-if="anexos && anexos.length">
21
+ <EmailFile
22
+ class="d-flex flex-wrap align-items-center"
23
+ v-for="(anexo, index) in anexos" :key="index"
24
+ :anexo="anexo"
25
+ :dominio="dominio"
26
+ />
27
+ </template>
28
+ </div>
29
+ </template>
30
+
31
+ <script>
32
+ import EmailFile from "./EmailFile.vue"
33
+ import { textoLongo } from "@/mixins/formatarTexto"
34
+
35
+ export default {
36
+ mixins: [textoLongo],
37
+ components: { EmailFile },
38
+ props: {
39
+ dominio: {
40
+ type: String,
41
+ required: true
42
+ },
43
+ dicionario: {
44
+ type: Object,
45
+ required: true
46
+ },
47
+ de: {
48
+ type: String,
49
+ required: false,
50
+ default: ""
51
+ },
52
+ para: {
53
+ type: String,
54
+ required: false,
55
+ default: ""
56
+ },
57
+ html: {
58
+ type: String,
59
+ required: false,
60
+ default: ""
61
+ },
62
+ assunto: {
63
+ type: String,
64
+ required: false,
65
+ default: ""
66
+ },
67
+ dataHora: {
68
+ type: String,
69
+ required: false,
70
+ default: ""
71
+ },
72
+ mensagem: {
73
+ type: String,
74
+ required: false,
75
+ default: ""
76
+ },
77
+ anexos: {
78
+ type: [Array, String],
79
+ required: false,
80
+ default: () => { return [] }
81
+ },
82
+ iniciarAberto: {
83
+ type: Boolean,
84
+ required: false,
85
+ default: false
86
+ }
87
+ },
88
+ data() {
89
+ return {
90
+ estado: 0
91
+ }
92
+ },
93
+ computed: {
94
+ siglaNome() {
95
+ return this.de[0] ? this.de[0].toUpperCase() : ""
96
+ }
97
+ },
98
+ methods: {
99
+ toggleEstado() {
100
+ this.estado = this.estado == 0 ? 1 : 0
101
+ }
102
+ }
103
+ }
104
+ </script>
105
+ <style scoped>
106
+ .w-100 {
107
+ width: 100%;
108
+ }
109
+ .text-dark {
110
+ color: #333
111
+ }
112
+ .min-h-60 {
113
+ min-height: 60px;
114
+ }
115
+ .d-flex {
116
+ display: flex;
117
+ }
118
+ .flex-wrap {
119
+ flex-wrap: wrap;
120
+ }
121
+ .border-bottom-1 {
122
+ border-bottom: 1px solid;
123
+ }
124
+ .border-color-gray {
125
+ border-color: #CCC
126
+ }
127
+ .transition-150 {
128
+ transition: all 150ms ease-in-out;
129
+ }
130
+ .cursor-pointer {
131
+ cursor: pointer;
132
+ }
133
+ .justify-content-between {
134
+ justify-content: space-between;
135
+ }
136
+ .align-items-center {
137
+ align-items: center;
138
+ }
139
+ .align-self-start {
140
+ align-self: flex-start;
141
+ }
142
+ .border-radius-round {
143
+ border-radius: 50%!important;
144
+ }
145
+ .w-36px {
146
+ width: 36px;
147
+ }
148
+ .h-36px {
149
+ height: 36px;
150
+ }
151
+ .border-1 {
152
+ border: 1px solid;
153
+ }
154
+ .mr-10 {
155
+ margin-right: 10px;
156
+ }
157
+ .flex-column {
158
+ display: flex;
159
+ flex-direction: column
160
+ }
161
+ .text-bold {
162
+ font-weight: bold;
163
+ }
164
+ .fs-_9 {
165
+ font-size: 14.4px;
166
+ }
167
+ .fs-_8 {
168
+ font-size: 12.8px;
169
+ }
170
+ .text-gray {
171
+ color: gray;
172
+ }
173
+ .p-15 {
174
+ padding: 15px;
175
+ }
176
+ .text-ellipsis{
177
+ white-space: nowrap;
178
+ text-overflow: ellipsis;
179
+ overflow: hidden
180
+ }
181
+ .d-flex-center{
182
+ display: flex;
183
+ justify-content: center;
184
+ align-items: center
185
+ }
186
186
  </style>