vue-intergrall-plugins 1.0.96 → 1.0.98

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 (6) hide show
  1. package/dist/vue-intergrall-plugins.esm.js +116 -10
  2. package/dist/vue-intergrall-plugins.min.js +1 -1
  3. package/dist/vue-intergrall-plugins.ssr.js +88 -12
  4. package/package.json +1 -1
  5. package/src/lib-components/Templates/TemplateGenerator.vue +50 -39
  6. package/src/lib-components/Templates/TemplateSingle.vue +130 -133
package/src/lib-components/Templates/TemplateSingle.vue CHANGED
@@ -1,90 +1,86 @@
1
1
  <template>
2
2
  <div class="ts-container">
3
3
  <div class="ts-content">
4
- <div
5
- v-for="(component, cIndex) in template.components"
6
- :key="cIndex"
7
- :class="`${component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : ''}${template.components.length == 1 ? 'custom-box-shadow-bottom' : ''}`"
8
- >
9
- <header
10
- v-if="component.type === 'header'"
4
+ <div v-for="(component, cIndex) in template.components" :key="cIndex"
5
+ :class="`${component.type == 'footer' ? 'order-1 custom-box-shadow-bottom' : ''}${template.components.length == 1 ? 'custom-box-shadow-bottom' : ''}`">
6
+ <header v-if="component.type === 'header'"
11
7
  :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''}`"
12
- id="template_header"
13
- >
8
+ id="template_header">
14
9
  <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
15
10
  <template v-if="param.type === 'text'">
16
- <div
17
- v-if="regexVars.test(param.text)"
18
- v-html="
19
- param.text.replace(
20
- regexVars,
21
- `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
22
- )
23
- "
24
- ></div>
11
+ <div v-if="regexVars.test(param.text)" v-html="param.text.replace(
12
+ regexVars,
13
+ `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
14
+ )
15
+ "></div>
25
16
  <p v-else v-html="param.text"></p>
26
17
  </template>
27
18
  <div v-else-if="param.type == 'image'" class="ts-image-type">
28
- <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions" @change="fileUpload($event)" />
19
+ <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
20
+ @change="fileUpload($event)" />
29
21
  <template v-if="headerFiles[0]">
30
- <fa-icon
31
- :icon="['fas', headerFiles[0].current_icon]"
32
- :class="`color-${headerFiles[0].current_color}`"
33
- @click="triggerInputFile(`header-${pIndex}`)"
34
- v-tippy="{placement: 'right'}"
35
- :content="headerFiles[0].image_preview ?
22
+ <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
23
+ @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].image_preview ?
36
24
  `<div class='custom-tooltip-image'>
37
25
  <img src='${headerFiles[0].image_preview}' alt='${headerFiles[0].name}' />
38
- </div>`
26
+ </div>`
39
27
  : headerFiles[0].name
40
- "
41
- />
28
+ " />
42
29
  </template>
43
- <fa-icon
44
- v-else
45
- class="select-image"
46
- :icon="['fas', 'image']"
47
- @click="triggerInputFile(`header-${pIndex}`)"
48
- v-tippy="{placement: 'right'}"
49
- :content="`Selecionar anexo`"
50
- />
30
+ <fa-icon v-else class="select-image" :icon="['fas', 'image']"
31
+ @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
32
+ :content="`Selecionar anexo`" />
33
+ </div>
34
+ <div v-else-if="param.type == 'document'" class="ts-image-type">
35
+ <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
36
+ @change="fileUpload($event)" />
37
+ <template v-if="headerFiles[0]">
38
+ <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
39
+ @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].name
40
+ " />
41
+ </template>
42
+ <fa-icon v-else class="select-image" :icon="['fas', 'file-alt']"
43
+ @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
44
+ :content="`Selecionar anexo`" />
45
+ </div>
46
+ <div v-else-if="param.type == 'video'" class="ts-image-type">
47
+ <input class="d-none" type="file" :ref="`ts-input-header-${pIndex}`" :accept="acceptedExtensions"
48
+ @change="fileUpload($event)" />
49
+ <template v-if="headerFiles[0]">
50
+ <fa-icon :icon="['fas', headerFiles[0].current_icon]" :class="`color-${headerFiles[0].current_color}`"
51
+ @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }" :content="headerFiles[0].name
52
+ " />
53
+ </template>
54
+ <fa-icon v-else class="select-image" :icon="['fas', 'video']" style="font-size: 1.2rem"
55
+ @click="triggerInputFile(`header-${pIndex}`)" v-tippy="{ placement: 'right' }"
56
+ :content="`Selecionar anexo`" />
51
57
  </div>
52
58
  </div>
53
59
  </header>
54
- <section
55
- v-if="component.type === 'body'"
60
+ <section v-if="component.type === 'body'"
56
61
  :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''} ${!hasButtonOrFooterComponent ? 'custom-footer-style custom-box-shadow-bottom custom-border-gray' : ''}`"
57
- id="template_body"
58
- >
62
+ id="template_body">
59
63
  <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
60
64
  <template v-if="param.type === 'text'">
61
- <div
62
- v-if="regexVars.test(param.text)"
63
- v-html="
64
- param.text.replace(
65
- regexVars,
66
- `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
67
- )
68
- "
69
- ></div>
65
+ <div v-if="regexVars.test(param.text)" v-html="param.text.replace(
66
+ regexVars,
67
+ `<div class='ts-content__var'>${htmlInputString}${varListValues}</div>`
68
+ )
69
+ "></div>
70
70
  <p v-else v-html="param.text"></p>
71
71
  </template>
72
72
  </div>
73
73
  </section>
74
- <section
75
- v-if="component.type == 'button'"
74
+ <section v-if="component.type == 'button'"
76
75
  :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''} ${!hasFooterComponent ? 'custom-footer-style custom-box-shadow-bottom' : ''}`"
77
- id="template_buttons"
78
- >
76
+ id="template_buttons">
79
77
  <div v-for="(param, pIndex) in component.parameters" :key="pIndex" class="ts-button">
80
78
  <p v-if="param.text" v-html="param.text"></p>
81
79
  </div>
82
80
  </section>
83
- <footer
84
- v-if="component.type == 'footer'"
81
+ <footer v-if="component.type == 'footer'"
85
82
  :class="`${template.components.length == 1 ? 'border-radius-5 custom-border-gray' : ''}`"
86
- id="template_footer"
87
- >
83
+ id="template_footer">
88
84
  <div v-for="(param, pIndex) in component.parameters" :key="pIndex">
89
85
  <small v-if="param.type == 'text'" v-html="param.text"> </small>
90
86
  </div>
@@ -93,22 +89,23 @@
93
89
  </div>
94
90
 
95
91
  <div class="container-btns">
96
- <div class="tg-btn" :class="{'small-btn' : iconButton}" v-if="hasButton">
92
+ <div class="tg-btn" :class="{ 'small-btn': iconButton }" v-if="hasButton">
97
93
  <button @click="$emit('click-trigger')" ref="template-single-button">
98
- <template v-if="!iconButton">
94
+ <template v-if="!iconButton">
99
95
  <fa-icon :icon="['fas', 'paper-plane']" />
100
- {{ dictionary.btn_contatar_clientes }}
96
+ {{ dictionary.btn_contatar_clientes }}
101
97
  </template>
102
98
  <fa-icon v-else :icon="['fas', 'paper-plane']" />
103
99
  </button>
104
-
100
+
105
101
  </div>
106
-
107
- <div class="tg-btn btn-red" :class="{'small-btn' : iconButton}" v-if="hasSecondaryButton">
108
- <button v-if="hasSecondaryButton" @click="$emit('dispatch-clients-with-bot')" ref="template-single-button-secondary">
109
- <template v-if="!iconButton">
102
+
103
+ <div class="tg-btn btn-red" :class="{ 'small-btn': iconButton }" v-if="hasSecondaryButton">
104
+ <button v-if="hasSecondaryButton" @click="$emit('dispatch-clients-with-bot')"
105
+ ref="template-single-button-secondary">
106
+ <template v-if="!iconButton">
110
107
  <fa-icon :icon="['fas', 'paper-plane']" />
111
- {{ dictionary.btn_contatar_clientes_com_bot }}
108
+ {{ dictionary.btn_contatar_clientes_com_bot }}
112
109
  </template>
113
110
  <fa-icon v-else :icon="['fas', 'paper-plane']" />
114
111
  </button>
@@ -119,21 +116,21 @@
119
116
  </template>
120
117
 
121
118
  <style>
122
- .btn-red button {
123
- background-color: red;
124
- }
125
-
126
- .btn-red svg {
127
- color: rgb(182, 0, 0);
128
- }
119
+ .btn-red button {
120
+ background-color: red;
121
+ }
129
122
 
130
- .container-btns {
131
- display: flex;
132
- flex-direction: column;
133
- justify-content: center;
134
- align-items: center;
135
- gap: 10px;
136
- }
123
+ .btn-red svg {
124
+ color: rgb(182, 0, 0);
125
+ }
126
+
127
+ .container-btns {
128
+ display: flex;
129
+ flex-direction: column;
130
+ justify-content: center;
131
+ align-items: center;
132
+ gap: 10px;
133
+ }
137
134
  </style>
138
135
 
139
136
  <script>
@@ -185,17 +182,17 @@ export default {
185
182
  },
186
183
  computed: {
187
184
  hasFooterComponent() {
188
- if(!this.template.components || !this.template.components.length) return false
185
+ if (!this.template.components || !this.template.components.length) return false
189
186
  const types = []
190
187
  this.template.components.forEach(({ type }) => types.push(type))
191
- if(types.includes('footer')) return true
188
+ if (types.includes('footer')) return true
192
189
  return false
193
190
  },
194
191
  hasButtonOrFooterComponent() {
195
- if(!this.template.components || !this.template.components.length) return false
192
+ if (!this.template.components || !this.template.components.length) return false
196
193
  const types = []
197
194
  this.template.components.forEach(({ type }) => types.push(type))
198
- if(types.includes('button')) return true
195
+ if (types.includes('button')) return true
199
196
  return this.hasFooterComponent
200
197
  },
201
198
  },
@@ -203,7 +200,7 @@ export default {
203
200
  this.$root.$refs[`template-single-${this.identifier}`] = this
204
201
  },
205
202
  mounted() {
206
- if(this.allVariables) this.getListOpts()
203
+ if (this.allVariables) this.getListOpts()
207
204
  this.setInputs();
208
205
  this.setImageVar(false)
209
206
  },
@@ -220,8 +217,8 @@ export default {
220
217
  methods: {
221
218
  handleInitialFocus() {
222
219
  const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
223
- if(allInputs.length) allInputs[0].focus()
224
- else if(this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
220
+ if (allInputs.length) allInputs[0].focus()
221
+ else if (this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
225
222
  },
226
223
  limparInputVar() {
227
224
  const allInputs = document.querySelectorAll(`.input-var-${this.identifier}`);
@@ -229,13 +226,13 @@ export default {
229
226
  input.focus();
230
227
  input.value = "";
231
228
  input.blur();
232
- this.setVar({ target: input }, input.id.replace(/[{}]+/g, ''));
229
+ this.setVar({ target: input }, input.id.replace(/[{}]+/g, ''));
233
230
  })
234
231
  this.setImageVar(false)
235
232
  },
236
233
  getListOpts() {
237
234
  this.varListValues =
238
- `<ul class="ts-dropdown">
235
+ `<ul class="ts-dropdown">
239
236
  <li> nome </li>
240
237
  ${this.allVariables ? '<li> telefone </li>' : ''}
241
238
  </ul>`
@@ -243,22 +240,22 @@ export default {
243
240
  fileUpload(event) {
244
241
  try {
245
242
  const allFiles = event.target.files ? event.target.files : event.dataTransfer.files ? event.dataTransfer.files : false
246
- if(!allFiles || !allFiles.length) return this.setImageVar(false)
247
- if(allFiles.length > 1) {
243
+ if (!allFiles || !allFiles.length) return this.setImageVar(false)
244
+ if (allFiles.length > 1) {
248
245
  this.$toasted.global.defaultInfo({ msg: `Limite de 1 arquivo por vez` })
249
246
  return this.setImageVar(false)
250
247
  }
251
248
  const file = allFiles[0]
252
249
  const { type, name } = file
253
250
  const validTypes = ['audio/aac', 'audio/mp4', 'audio/mpeg', 'audio/amr', 'audio/ogg', 'text/plain', 'application/pdf', 'application/vnd.ms-powerpoint', 'application/msword', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.spreasheetml.sheet', 'image/jpeg', 'image/png', 'video/mp4', 'video/3gp', 'image/webp']
254
- if(!validTypes.includes(type)) {
251
+ if (!validTypes.includes(type)) {
255
252
  this.$toasted.global.defaultInfo({ msg: `(${type}) ${this.dictionary.msg_arquivo_invalido}` })
256
253
  return this.setImageVar(false)
257
254
  }
258
255
  const returnArrType = str => {
259
256
  const arr = []
260
257
  validTypes.forEach(currentType => {
261
- if(currentType.indexOf(str) > -1) arr.push(currentType)
258
+ if (currentType.indexOf(str) > -1) arr.push(currentType)
262
259
  })
263
260
  return arr
264
261
  }
@@ -268,23 +265,23 @@ export default {
268
265
  const audioTypes = returnArrType('audio/')
269
266
  const videoTypes = returnArrType('video/')
270
267
  const isPdf = type.indexOf('application/pdf') > -1
271
-
268
+
272
269
  let sizeInBytes = 0
273
270
  Array.from(allFiles).forEach(file => sizeInBytes += file.size)
274
- const sizeInMb = parseFloat((sizeInBytes / (1024*1024)).toFixed(2))
275
- if(sizeInMb == 0 && sizeInBytes == 0) {
271
+ const sizeInMb = parseFloat((sizeInBytes / (1024 * 1024)).toFixed(2))
272
+ if (sizeInMb == 0 && sizeInBytes == 0) {
276
273
  this.$toasted.global.defaultInfo({ msg: this.dictionary.msg_arquivo_invalido })
277
274
  return this.setImageVar(false)
278
275
  }
279
276
  const max = imageTypes.includes(type) ? 5 : 15
280
- if(sizeInMb >= max) {
277
+ if (sizeInMb >= max) {
281
278
  this.$toasted.global.defaultInfo({ msg: `Limite de ${max} MB por arquivo` })
282
279
  return this.setImageVar(false)
283
280
  }
284
-
281
+
285
282
  const fileReader = new FileReader()
286
283
  let current_icon = 'file-alt', current_color = 'blue', setValues = true
287
- if(imageTypes.includes(type)) {
284
+ if (imageTypes.includes(type)) {
288
285
  setValues = false
289
286
  fileReader.readAsDataURL(file)
290
287
  fileReader.onload = () => {
@@ -295,60 +292,60 @@ export default {
295
292
  this.$forceUpdate()
296
293
  this.setImageVar(file)
297
294
  }
298
- }else if(docTypes.includes(type) && isPdf) {
295
+ } else if (docTypes.includes(type) && isPdf) {
299
296
  current_icon = 'file-pdf'
300
297
  current_color = 'red'
301
- }else if(audioTypes.includes(type)) {
298
+ } else if (audioTypes.includes(type)) {
302
299
  current_icon = 'microphone'
303
300
  current_color = 'black'
304
- }else if(videoTypes.includes(type)) {
301
+ } else if (videoTypes.includes(type)) {
305
302
  current_icon = 'video',
306
- current_color = 'black'
303
+ current_color = 'black'
307
304
  }
308
305
 
309
- if(setValues) {
306
+ if (setValues) {
310
307
  this.headerFiles[0] = { file, current_icon, current_color, name }
311
308
  this.$forceUpdate()
312
309
  this.setImageVar(file)
313
310
  }
314
- }catch(error) {
311
+ } catch (error) {
315
312
  console.error("Erro file upload: ", error)
316
313
  }
317
314
  },
318
315
  triggerInputFile(origin) {
319
- if(this.$refs[`ts-input-${origin}`]) {
320
- const elem = this.$refs[`ts-input-${origin}`][0] ? this.$refs[`ts-input-${origin}`][0] : this.$refs[`ts-input-${origin}`]
316
+ if (this.$refs[`ts-input-${origin}`]) {
317
+ const elem = this.$refs[`ts-input-${origin}`][0] ? this.$refs[`ts-input-${origin}`][0] : this.$refs[`ts-input-${origin}`]
321
318
  elem && elem.click()
322
319
  }
323
320
  },
324
321
  setInputs() {
325
322
  let qtdInputs = 0
326
323
  const header = document.querySelector("#template_header");
327
- const body = document.querySelector("#template_body");
324
+ const body = document.querySelector("#template_body");
328
325
  const footer = document.querySelector("#template_footer");
329
326
 
330
327
  let hasText = false
331
328
  if (header !== null) {
332
329
  header.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) })
333
330
  qtdInputs += header.querySelectorAll(`.input-var-${this.identifier}`).length
334
- if(qtdInputs > 0 && header.innerText) hasText = true
331
+ if (qtdInputs > 0 && header.innerText) hasText = true
335
332
  }
336
333
  if (this.lastVar === 0) this.lastVar += 1
337
334
  if (body !== null) {
338
335
  body.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
339
336
  qtdInputs += body.querySelectorAll(`.input-var-${this.identifier}`).length
340
- if(qtdInputs > 0 && body.innerText) hasText = true
337
+ if (qtdInputs > 0 && body.innerText) hasText = true
341
338
  }
342
- if (footer !== null) {
339
+ if (footer !== null) {
343
340
  footer.querySelectorAll(`.input-var-${this.identifier}`).forEach((input) => { this.setEvent(input) });
344
341
  qtdInputs += footer.querySelectorAll(`.input-var-${this.identifier}`).length
345
- if(qtdInputs > 0 && footer.innerText) hasText = true
342
+ if (qtdInputs > 0 && footer.innerText) hasText = true
346
343
  }
347
344
 
348
- if(qtdInputs === 1 && !hasText) {
345
+ if (qtdInputs === 1 && !hasText) {
349
346
  document.querySelector(`.input-var-${this.identifier}`).parentElement.style.width = "100%"
350
347
  document.querySelector(`.input-var-${this.identifier}`).style.width = "100%"
351
- }else if(qtdInputs === 0) {
348
+ } else if (qtdInputs === 0) {
352
349
  this.$emit("set-vars", this.template)
353
350
  }
354
351
  },
@@ -361,28 +358,28 @@ export default {
361
358
  input.setAttribute("id", `{{var_${this.lastVar}}}`);
362
359
  input.addEventListener("input", (event) => {
363
360
  this.setVar(event, `var_${this.lastVar}`, true);
364
- if(varList) varList.classList.remove("visible")
361
+ if (varList) varList.classList.remove("visible")
365
362
  });
366
363
  input.addEventListener("focus", () => {
367
364
  input.classList.remove("invalid");
368
365
  input.classList.add("active");
369
- if(varList) {
366
+ if (varList) {
370
367
  const handleNextFocus = () => {
371
368
  const allInputs = document.querySelectorAll(`.input-var-${currentInstance.identifier}`)
372
369
  let stop = false
373
- if(allInputs.length) {
370
+ if (allInputs.length) {
374
371
  allInputs.forEach(elem => {
375
- if(!elem.value && !stop) {
372
+ if (!elem.value && !stop) {
376
373
  stop = true
377
374
  elem.focus()
378
375
  }
379
376
  })
380
377
  }
381
- if(!stop && this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
378
+ if (!stop && this.$refs["template-single-button"]) this.$refs["template-single-button"].focus()
382
379
  }
383
380
 
384
- for(let i = 0; i < varList.children.length; i++) {
385
- varList.children[i].addEventListener("click", function() {
381
+ for (let i = 0; i < varList.children.length; i++) {
382
+ varList.children[i].addEventListener("click", function () {
386
383
  input.value = `[${this.innerText}]`
387
384
  input.classList.add("active")
388
385
  input.dispatchEvent(new Event('input'))
@@ -393,8 +390,8 @@ export default {
393
390
  const containerGeral = document.querySelector(".tg-container")
394
391
  varList.classList.add("visible")
395
392
  const maxBottom = containerGeral.getBoundingClientRect().bottom,
396
- currentBottom = varList.getBoundingClientRect().bottom
397
- if(currentBottom > maxBottom) {
393
+ currentBottom = varList.getBoundingClientRect().bottom
394
+ if (currentBottom > maxBottom) {
398
395
  varList.style.top = `-${varList.getBoundingClientRect().height}px`
399
396
  varList.style.borderTop = `1px solid currentColor`
400
397
  }
@@ -411,7 +408,7 @@ export default {
411
408
  input.classList.remove("invalid");
412
409
  input.classList.remove("active");
413
410
  }
414
- if(varList) varList.classList.remove("visible")
411
+ if (varList) varList.classList.remove("visible")
415
412
  });
416
413
  input.addEventListener("keydown", (event) => {
417
414
  if (event.keyCode == 13 && this.hasButton) this.$emit("click-trigger");
@@ -437,24 +434,24 @@ export default {
437
434
  consecutiveSpaces: /\s{3,}/g
438
435
  }
439
436
  const value = textValue ? textValue.trim("") : "";
440
- if(!value.length) return false
441
-
437
+ if (!value.length) return false
438
+
442
439
  let isValueValid = true
443
- for(let key in regex) {
444
- if(!isValueValid) return isValueValid
445
- if(regex[key].test(value)) isValueValid = false
440
+ for (let key in regex) {
441
+ if (!isValueValid) return isValueValid
442
+ if (regex[key].test(value)) isValueValid = false
446
443
  }
447
444
 
448
445
  return isValueValid
449
446
  },
450
447
  setImageVar(file) {
451
448
  this.$emit("set-file-var", file)
452
- if(!file) {
449
+ if (!file) {
453
450
  this.headerFiles = []
454
451
  return this.$forceUpdate()
455
- }else {
456
- if(this.lastVar == 0) return this.$emit("set-vars", this.template)
457
- if(Object.keys(this.varValues).length) return this.$emit("set-vars", this.varValues)
452
+ } else {
453
+ if (this.lastVar == 0) return this.$emit("set-vars", this.template)
454
+ if (Object.keys(this.varValues).length) return this.$emit("set-vars", this.varValues)
458
455
  this.$nextTick(() => this.handleInitialFocus())
459
456
  }
460
457
  },