vue-intergrall-plugins 0.0.1085 → 1.0.1

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 (37) hide show
  1. package/README.md +13 -5
  2. package/dist/vue-intergrall-plugins.esm.js +10842 -1882
  3. package/dist/vue-intergrall-plugins.min.js +1 -1
  4. package/dist/vue-intergrall-plugins.ssr.js +10376 -1694
  5. package/package.json +66 -62
  6. package/src/lib-components/Buttons/IconButton.vue +27 -0
  7. package/src/lib-components/Buttons/SimpleButton.vue +140 -0
  8. package/src/lib-components/Cards/Card.vue +429 -0
  9. package/src/lib-components/Cards/CardCheck.vue +35 -0
  10. package/src/lib-components/Cards/CardFile.vue +157 -0
  11. package/src/lib-components/Chat/AudioSpeedControl.vue +60 -0
  12. package/src/lib-components/Chat/BtnDownloadAllFiles.vue +36 -0
  13. package/src/lib-components/Chat/BtnEmojis.vue +51 -45
  14. package/src/lib-components/Chat/BtnFiles.vue +408 -131
  15. package/src/lib-components/Chat/BtnScreenShare.vue +36 -0
  16. package/src/lib-components/Chat/BtnStandardMessages.vue +17 -0
  17. package/src/lib-components/Chat/ExpandTextarea.vue +5 -6
  18. package/src/lib-components/Chat/MultipleFilePreview.vue +40 -22
  19. package/src/lib-components/Chat/Picker.vue +185 -149
  20. package/src/lib-components/Chat/SingleFilePreview.vue +28 -7
  21. package/src/lib-components/Chat/StandardMessages.vue +245 -0
  22. package/src/lib-components/Chat/TextFooter.vue +791 -451
  23. package/src/lib-components/Email/EmailFile.vue +126 -0
  24. package/src/lib-components/Email/EmailItem.vue +186 -0
  25. package/src/lib-components/Loader/Loader.vue +6 -1
  26. package/src/lib-components/Messages/AnexoMensagem.vue +442 -0
  27. package/src/lib-components/Messages/CardAttachment.vue +61 -0
  28. package/src/lib-components/Messages/CardMessages.vue +666 -0
  29. package/src/lib-components/Messages/ChatMessages.vue +1082 -0
  30. package/src/lib-components/Messages/InteratividadeBotoes.vue +165 -0
  31. package/src/lib-components/Messages/InteratividadeFormulario.vue +392 -0
  32. package/src/lib-components/Messages/InteratividadePopup.vue +89 -0
  33. package/src/lib-components/Messages/LinkPreview.vue +189 -0
  34. package/src/lib-components/Scroll/ScrollContent.vue +166 -0
  35. package/src/lib-components/Templates/TemplateGenerator.vue +187 -50
  36. package/src/lib-components/Templates/TemplateMessage.vue +12 -1
  37. package/src/lib-components/Templates/TemplateSingle.vue +232 -13
package/src/lib-components/Chat/Picker.vue CHANGED
@@ -1,15 +1,15 @@
1
1
  <template>
2
- <div class="sm-emoji-picker box-shadow">
2
+ <div class="sm-emoji-picker box-shadow" @click.stop>
3
3
  <SkeletonPicker v-if="loading" />
4
4
  <div class="sm-emoji-header">
5
- <span
5
+ <span
6
6
  class="sm-emoji-link"
7
- v-for="(category, indexCategoryHeader) in allEmojis.categories"
8
- :key="`ich-${indexCategoryHeader}`"
7
+ v-for="(category, indexCategoryHeader) in allEmojis.categories"
8
+ :key="`ich-${indexCategoryHeader}`"
9
9
  :title="category.name"
10
- :class="{'active' : categoriaSelecionada == category.id}"
10
+ :class="{ active: categoriaSelecionada == category.id }"
11
11
  @click="pickerHeaderHandler($event, category.id)"
12
- v-html="`<a href='#${category.id}'>${category.svg}</a>`"
12
+ v-html="`<a href='#${category.id}'>${category.svg}</a>`"
13
13
  ></span>
14
14
  </div>
15
15
  <div class="sm-emoji-scroll" ref="sm-scroll">
@@ -17,20 +17,45 @@
17
17
  <input type="text" name="emoji-search" @input="filterEmojis" v-model="search" />
18
18
  </div>
19
19
  <template v-if="!filteredList.length">
20
- <div v-for="(category, indexCategory) in allEmojis.categories" :key="`ic-${indexCategory}`">
21
- <div class="sm-emoji-selection">
22
- <span class="sm-emoji-title" :id="category.id" v-html="`${category.svg} ${category.name}`" :title="category.name"></span>
23
- <div class="sm-emoji-group">
24
- <div class="sm-emoji-item" v-for="(emojiKey, key) in category.emojis" :key="`ee-${key}-${category.id}`">
25
- <span @click="addEmoji(allEmojis.emojis[emojiKey], emojiKey)"> {{ allEmojis.emojis[emojiKey].finalEmoji }} </span>
20
+ <div
21
+ v-for="(category, indexCategory) in allEmojis.categories"
22
+ :key="`ic-${indexCategory}`"
23
+ >
24
+ <div class="sm-emoji-selection">
25
+ <span
26
+ class="sm-emoji-title"
27
+ :id="category.id"
28
+ v-html="`${category.svg} ${category.name}`"
29
+ :title="category.name"
30
+ ></span>
31
+ <div class="sm-emoji-group">
32
+ <div
33
+ class="sm-emoji-item"
34
+ v-for="(emojiKey, key) in category.emojis"
35
+ :key="`ee-${key}-${category.id}`"
36
+ >
37
+ <span
38
+ v-if="
39
+ allEmojis.emojis &&
40
+ allEmojis.emojis[emojiKey] &&
41
+ allEmojis.emojis[emojiKey].finalEmoji
42
+ "
43
+ @click="addEmoji(allEmojis.emojis[emojiKey], emojiKey)"
44
+ >
45
+ {{ allEmojis.emojis[emojiKey].finalEmoji }}
46
+ </span>
47
+ </div>
26
48
  </div>
27
49
  </div>
28
- </div>
29
50
  </div>
30
51
  </template>
31
52
  <template v-else>
32
53
  <div class="sm-emoji-group">
33
- <div class="sm-emoji-item" v-for="(emoji, key) in filteredList" :key="`ees-${key}`">
54
+ <div
55
+ class="sm-emoji-item"
56
+ v-for="(emoji, key) in filteredList"
57
+ :key="`ees-${key}`"
58
+ >
34
59
  <span @click="addEmoji(emoji)"> {{ emoji.finalEmoji }} </span>
35
60
  </div>
36
61
  </div>
@@ -40,8 +65,8 @@
40
65
  </template>
41
66
 
42
67
  <script>
43
- import allEmojis from "@/services/emojis/all.json"
44
- import SkeletonPicker from "./SkeletonPicker"
68
+ import allEmojis from "../../services/emojis/all.json";
69
+ import SkeletonPicker from "./SkeletonPicker";
45
70
 
46
71
  export default {
47
72
  components: { SkeletonPicker },
@@ -52,187 +77,194 @@ export default {
52
77
  search: "",
53
78
  filteredList: [],
54
79
  loading: true,
55
- isSticky: false
56
- }
80
+ isSticky: false,
81
+ };
57
82
  },
58
83
  mounted() {
59
- this.allEmojis = allEmojis
60
- this.loadEmojis()
84
+ this.allEmojis = allEmojis;
85
+ this.loadEmojis();
61
86
  },
62
87
  methods: {
63
88
  addEmojiToArray() {
64
89
  try {
65
- for(let key in this.allEmojis.emojis) {
66
- const keyCode = this.allEmojis.emojis[key]
67
- if(keyCode && keyCode.hasOwnProperty("finalEmoji")) continue
68
- const { b } = keyCode
69
- const hexPoints = b.split(/\s|-/)
70
- const codePoints = hexPoints.map(hex => {
71
- return parseInt(hex, 16)
72
- })
73
- const finalEmoji = String.fromCodePoint.apply(null, codePoints)
74
- this.$set(this.allEmojis.emojis[key], "hexa", hexPoints.join(""))
75
- this.$set(this.allEmojis.emojis[key], "finalEmoji", finalEmoji)
90
+ for (let key in this.allEmojis.emojis) {
91
+ const keyCode = this.allEmojis.emojis[key];
92
+ if (keyCode && keyCode.hasOwnProperty("finalEmoji")) continue;
93
+ const { b } = keyCode;
94
+ const hexPoints = b.split(/\s|-/);
95
+ const codePoints = hexPoints.map((hex) => {
96
+ return parseInt(hex, 16);
97
+ });
98
+ const finalEmoji = String.fromCodePoint.apply(null, codePoints);
99
+ this.$set(this.allEmojis.emojis[key], "hexa", hexPoints.join(""));
100
+ this.$set(this.allEmojis.emojis[key], "finalEmoji", finalEmoji);
76
101
  }
77
- }catch(e) {
78
- console.error("Erro ao gerar os emojis")
79
- console.error(e)
102
+ } catch (e) {
103
+ console.error("Erro ao gerar os emojis");
104
+ console.error(e);
80
105
  }
81
106
  },
82
107
  emojiHeaders() {
83
108
  try {
84
109
  const emojis = {
85
- recent: {
110
+ recent: {
86
111
  name: "Recentes",
87
- svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"></path><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"></path></svg>`
112
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 4h-2l-.001 7H9v2h2v2h2v-2h4v-2h-4z"></path><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"></path></svg>`,
88
113
  },
89
- people: {
114
+ people: {
90
115
  name: "Pessoas & Expressoes",
91
- svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"></path><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"></path></svg>`
116
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10"></path><path d="M8 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 7M16 7a2 2 0 1 0-.001 3.999A2 2 0 0 0 16 7M15.232 15c-.693 1.195-1.87 2-3.349 2-1.477 0-2.655-.805-3.347-2H15m3-2H6a6 6 0 1 0 12 0"></path></svg>`,
92
117
  },
93
- nature: {
118
+ nature: {
94
119
  name: "Animais & Natureza",
95
- svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"></path><path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"></path></svg>`
120
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M15.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 15.5 8M8.5 8a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 8.5 8"></path><path d="M18.933 0h-.027c-.97 0-2.138.787-3.018 1.497-1.274-.374-2.612-.51-3.887-.51-1.285 0-2.616.133-3.874.517C7.245.79 6.069 0 5.093 0h-.027C3.352 0 .07 2.67.002 7.026c-.039 2.479.276 4.238 1.04 5.013.254.258.882.677 1.295.882.191 3.177.922 5.238 2.536 6.38.897.637 2.187.949 3.2 1.102C8.04 20.6 8 20.795 8 21c0 1.773 2.35 3 4 3 1.648 0 4-1.227 4-3 0-.201-.038-.393-.072-.586 2.573-.385 5.435-1.877 5.925-7.587.396-.22.887-.568 1.104-.788.763-.774 1.079-2.534 1.04-5.013C23.929 2.67 20.646 0 18.933 0M3.223 9.135c-.237.281-.837 1.155-.884 1.238-.15-.41-.368-1.349-.337-3.291.051-3.281 2.478-4.972 3.091-5.031.256.015.731.27 1.265.646-1.11 1.171-2.275 2.915-2.352 5.125-.133.546-.398.858-.783 1.313M12 22c-.901 0-1.954-.693-2-1 0-.654.475-1.236 1-1.602V20a1 1 0 1 0 2 0v-.602c.524.365 1 .947 1 1.602-.046.307-1.099 1-2 1m3-3.48v.02a4.752 4.752 0 0 0-1.262-1.02c1.092-.516 2.239-1.334 2.239-2.217 0-1.842-1.781-2.195-3.977-2.195-2.196 0-3.978.354-3.978 2.195 0 .883 1.148 1.701 2.238 2.217A4.8 4.8 0 0 0 9 18.539v-.025c-1-.076-2.182-.281-2.973-.842-1.301-.92-1.838-3.045-1.853-6.478l.023-.041c.496-.826 1.49-1.45 1.804-3.102 0-2.047 1.357-3.631 2.362-4.522C9.37 3.178 10.555 3 11.948 3c1.447 0 2.685.192 3.733.57 1 .9 2.316 2.465 2.316 4.48.313 1.651 1.307 2.275 1.803 3.102.035.058.068.117.102.178-.059 5.967-1.949 7.01-4.902 7.19m6.628-8.202c-.037-.065-.074-.13-.113-.195a7.587 7.587 0 0 0-.739-.987c-.385-.455-.648-.768-.782-1.313-.076-2.209-1.241-3.954-2.353-5.124.531-.376 1.004-.63 1.261-.647.636.071 3.044 1.764 3.096 5.031.027 1.81-.347 3.218-.37 3.235"></path></svg>`,
96
121
  },
97
- foods: {
122
+ foods: {
98
123
  name: "Comidas & Bebibas",
99
- svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"></path></svg>`
124
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 4.978c-1.838 0-2.876.396-3.68.934.513-1.172 1.768-2.934 4.68-2.934a1 1 0 0 0 0-2c-2.921 0-4.629 1.365-5.547 2.512-.064.078-.119.162-.18.244C11.73 1.838 10.798.023 9.207.023 8.579.022 7.85.306 7 .978 5.027 2.54 5.329 3.902 6.492 4.999 3.609 5.222 0 7.352 0 12.969c0 4.582 4.961 11.009 9 11.009 1.975 0 2.371-.486 3-1 .629.514 1.025 1 3 1 4.039 0 9-6.418 9-11 0-5.953-4.055-8-7-8M8.242 2.546c.641-.508.943-.523.965-.523.426.169.975 1.405 1.357 3.055-1.527-.629-2.741-1.352-2.98-1.846.059-.112.241-.356.658-.686M15 21.978c-1.08 0-1.21-.109-1.559-.402l-.176-.146c-.367-.302-.816-.452-1.266-.452s-.898.15-1.266.452l-.176.146c-.347.292-.477.402-1.557.402-2.813 0-7-5.389-7-9.009 0-5.823 4.488-5.991 5-5.991 1.939 0 2.484.471 3.387 1.251l.323.276a1.995 1.995 0 0 0 2.58 0l.323-.276c.902-.78 1.447-1.251 3.387-1.251.512 0 5 .168 5 6 0 3.617-4.187 9-7 9"></path></svg>`,
100
125
  },
101
- activity: {
126
+ activity: {
102
127
  name: "Atividades",
103
- svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"></path></svg>`
128
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0C5.373 0 0 5.372 0 12c0 6.627 5.373 12 12 12 6.628 0 12-5.373 12-12 0-6.628-5.372-12-12-12m9.949 11H17.05c.224-2.527 1.232-4.773 1.968-6.113A9.966 9.966 0 0 1 21.949 11M13 11V2.051a9.945 9.945 0 0 1 4.432 1.564c-.858 1.491-2.156 4.22-2.392 7.385H13zm-2 0H8.961c-.238-3.165-1.536-5.894-2.393-7.385A9.95 9.95 0 0 1 11 2.051V11zm0 2v8.949a9.937 9.937 0 0 1-4.432-1.564c.857-1.492 2.155-4.221 2.393-7.385H11zm4.04 0c.236 3.164 1.534 5.893 2.392 7.385A9.92 9.92 0 0 1 13 21.949V13h2.04zM4.982 4.887C5.718 6.227 6.726 8.473 6.951 11h-4.9a9.977 9.977 0 0 1 2.931-6.113M2.051 13h4.9c-.226 2.527-1.233 4.771-1.969 6.113A9.972 9.972 0 0 1 2.051 13m16.967 6.113c-.735-1.342-1.744-3.586-1.968-6.113h4.899a9.961 9.961 0 0 1-2.931 6.113"></path></svg>`,
104
129
  },
105
- places: {
130
+ places: {
106
131
  name: "Viagens & Lugares",
107
- svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"></path><path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"></path></svg>`
132
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M6.5 12C5.122 12 4 13.121 4 14.5S5.122 17 6.5 17 9 15.879 9 14.5 7.878 12 6.5 12m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5M17.5 12c-1.378 0-2.5 1.121-2.5 2.5s1.122 2.5 2.5 2.5 2.5-1.121 2.5-2.5-1.122-2.5-2.5-2.5m0 3c-.275 0-.5-.225-.5-.5s.225-.5.5-.5.5.225.5.5-.225.5-.5.5"></path><path d="M22.482 9.494l-1.039-.346L21.4 9h.6c.552 0 1-.439 1-.992 0-.006-.003-.008-.003-.008H23c0-1-.889-2-1.984-2h-.642l-.731-1.717C19.262 3.012 18.091 2 16.764 2H7.236C5.909 2 4.738 3.012 4.357 4.283L3.626 6h-.642C1.889 6 1 7 1 8h.003S1 8.002 1 8.008C1 8.561 1.448 9 2 9h.6l-.043.148-1.039.346a2.001 2.001 0 0 0-1.359 2.097l.751 7.508a1 1 0 0 0 .994.901H3v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h6v1c0 1.103.896 2 2 2h2c1.104 0 2-.897 2-2v-1h1.096a.999.999 0 0 0 .994-.901l.751-7.508a2.001 2.001 0 0 0-1.359-2.097M6.273 4.857C6.402 4.43 6.788 4 7.236 4h9.527c.448 0 .834.43.963.857L19.313 9H4.688l1.585-4.143zM7 21H5v-1h2v1zm12 0h-2v-1h2v1zm2.189-3H2.811l-.662-6.607L3 11h18l.852.393L21.189 18z"></path></svg>`,
108
133
  },
109
- objects: {
134
+ objects: {
110
135
  name: "Objetos",
111
- svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"></path><path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"></path></svg>`
136
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 0a9 9 0 0 0-5 16.482V21s2.035 3 5 3 5-3 5-3v-4.518A9 9 0 0 0 12 0zm0 2c3.86 0 7 3.141 7 7s-3.14 7-7 7-7-3.141-7-7 3.14-7 7-7zM9 17.477c.94.332 1.946.523 3 .523s2.06-.19 3-.523v.834c-.91.436-1.925.689-3 .689a6.924 6.924 0 0 1-3-.69v-.833zm.236 3.07A8.854 8.854 0 0 0 12 21c.965 0 1.888-.167 2.758-.451C14.155 21.173 13.153 22 12 22c-1.102 0-2.117-.789-2.764-1.453z"></path><path d="M14.745 12.449h-.004c-.852-.024-1.188-.858-1.577-1.824-.421-1.061-.703-1.561-1.182-1.566h-.009c-.481 0-.783.497-1.235 1.537-.436.982-.801 1.811-1.636 1.791l-.276-.043c-.565-.171-.853-.691-1.284-1.794-.125-.313-.202-.632-.27-.913-.051-.213-.127-.53-.195-.634C7.067 9.004 7.039 9 6.99 9A1 1 0 0 1 7 7h.01c1.662.017 2.015 1.373 2.198 2.134.486-.981 1.304-2.058 2.797-2.075 1.531.018 2.28 1.153 2.731 2.141l.002-.008C14.944 8.424 15.327 7 16.979 7h.032A1 1 0 1 1 17 9h-.011c-.149.076-.256.474-.319.709a6.484 6.484 0 0 1-.311.951c-.429.973-.79 1.789-1.614 1.789"></path></svg>`,
112
137
  },
113
138
  symbols: {
114
139
  name: "Simbolos",
115
- svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>`
140
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>`,
116
141
  },
117
142
  flags: {
118
143
  name: "Bandeiras",
119
- svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>`
120
- }
121
- }
144
+ svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>`,
145
+ },
146
+ };
122
147
 
123
- if(this.allEmojis.categories[0].id != "recent") this.allEmojis.categories.unshift({ emojis: this.getRecentEmojis(), id: "recent", name: "" })
124
- this.allEmojis.categories = this.allEmojis.categories.filter(cat => {
125
- const { id } = cat
126
- if(emojis[id]) {
127
- cat.name = emojis[id].name
128
- cat.svg = emojis[id].svg
129
- return cat
148
+ if (this.allEmojis.categories[0].id != "recent")
149
+ this.allEmojis.categories.unshift({
150
+ emojis: this.getRecentEmojis(),
151
+ id: "recent",
152
+ name: "",
153
+ });
154
+ this.allEmojis.categories = this.allEmojis.categories.filter((cat) => {
155
+ const { id } = cat;
156
+ if (emojis[id]) {
157
+ cat.name = emojis[id].name;
158
+ cat.svg = emojis[id].svg;
159
+ return cat;
130
160
  }
131
- })
132
-
133
-
134
- }catch(e) {
135
- console.error("Erro ao gerar os emojis headers")
136
- console.error(e)
161
+ });
162
+ } catch (e) {
163
+ console.error("Erro ao gerar os emojis headers");
164
+ console.error(e);
137
165
  }
138
-
139
166
  },
140
167
  loadEmojis() {
141
168
  try {
142
- this.emojiHeaders()
143
- this.addEmojiToArray()
144
- setTimeout(() => { this.loading = false; }, 1500)
145
- }catch(e) {
146
- console.error("Erro ao carregar os emojis")
147
- console.error(e)
169
+ this.emojiHeaders();
170
+ this.addEmojiToArray();
171
+ setTimeout(() => {
172
+ this.loading = false;
173
+ }, 1500);
174
+ } catch (e) {
175
+ console.error("Erro ao carregar os emojis");
176
+ console.error(e);
148
177
  }
149
178
  },
150
179
  getRecentEmojis() {
151
- const recentEmojis = localStorage.getItem("recent-emojis")
152
- if(recentEmojis) return recentEmojis.split(",")
153
- return []
180
+ const recentEmojis = localStorage.getItem("recent-emojis");
181
+ if (recentEmojis) return recentEmojis.split(",");
182
+ return [];
154
183
  },
155
184
  setEmojiOnLocalStorage(emojiKey) {
156
185
  try {
157
- let finalStr = ""
158
- const recentEmojis = localStorage.getItem("recent-emojis")
159
- if(recentEmojis) {
160
- const arrRecent = recentEmojis.split(",")
161
- if(!arrRecent.includes(emojiKey)) {
162
- if(arrRecent.length < 20) {
163
- finalStr = `${emojiKey},${recentEmojis}`
164
- }else {
165
- arrRecent.pop()
166
- finalStr = `${emojiKey},${arrRecent.join(",")}`
186
+ let finalStr = "";
187
+ const recentEmojis = localStorage.getItem("recent-emojis");
188
+ if (recentEmojis) {
189
+ const arrRecent = recentEmojis.split(",");
190
+ if (!arrRecent.includes(emojiKey)) {
191
+ if (arrRecent.length < 20) {
192
+ finalStr = `${emojiKey},${recentEmojis}`;
193
+ } else {
194
+ arrRecent.pop();
195
+ finalStr = `${emojiKey},${arrRecent.join(",")}`;
167
196
  }
168
197
  }
169
- }else {
170
- finalStr = `${emojiKey}`
198
+ } else {
199
+ finalStr = `${emojiKey}`;
171
200
  }
172
- if(finalStr) {
173
- localStorage.setItem("recent-emojis", finalStr)
174
- const finalArr = finalStr.split(",").filter(str => { return str ? str : false })
175
- this.allEmojis.categories[0].emojis = finalArr
201
+ if (finalStr) {
202
+ localStorage.setItem("recent-emojis", finalStr);
203
+ const finalArr = finalStr.split(",").filter((str) => {
204
+ return str ? str : false;
205
+ });
206
+ this.allEmojis.categories[0].emojis = finalArr;
176
207
  }
177
- }catch(e) {
178
- console.error("Erro ao setar o emoji no localStorage")
179
- console.error(e)
208
+ } catch (e) {
209
+ console.error("Erro ao setar o emoji no localStorage");
210
+ console.error(e);
180
211
  }
181
-
182
212
  },
183
- addEmoji(emoji, emojiKey){
184
- this.setEmojiOnLocalStorage(emojiKey)
185
- this.$emit("insert-emoji", emoji)
213
+ addEmoji(emoji, emojiKey) {
214
+ this.setEmojiOnLocalStorage(emojiKey);
215
+ this.$emit("insert-emoji", emoji);
186
216
  },
187
217
  pickerHeaderHandler(e, id) {
188
218
  try {
189
- const { target } = e
190
- const { children } = target
191
- if(children.length) {
192
- const tag = children[0]
193
- tag.getAttribute("href") ? tag.click() : ""
219
+ const { target } = e;
220
+ const { children } = target;
221
+ if (children.length) {
222
+ const tag = children[0];
223
+ tag.getAttribute("href") ? tag.click() : "";
194
224
  }
195
- this.categoriaSelecionada = id
196
- }catch(e) {
197
- console.error("Erro ao mudar de categoria")
198
- console.error(e)
225
+ this.categoriaSelecionada = id;
226
+ } catch (e) {
227
+ console.error("Erro ao mudar de categoria");
228
+ console.error(e);
199
229
  }
200
230
  },
201
231
  filterEmojis() {
202
- if(!this.search.trim("")) return this.filteredList = []
232
+ if (!this.search.trim("")) return (this.filteredList = []);
203
233
 
204
- const rawList = []
205
- for(let key in this.allEmojis.emojis) {
206
- const emoji = this.allEmojis.emojis[key]
207
- const { a } = emoji
208
- const search = this.search.toUpperCase()
209
- const upperA = a.toUpperCase()
210
- if(upperA.indexOf(search) >= 0) rawList.push(emoji)
234
+ const rawList = [];
235
+ for (let key in this.allEmojis.emojis) {
236
+ const emoji = this.allEmojis.emojis[key];
237
+ const { a } = emoji;
238
+ const search = this.search.toUpperCase();
239
+ const upperA = a.toUpperCase();
240
+ if (upperA.indexOf(search) >= 0) rawList.push(emoji);
211
241
  }
212
- if(rawList.length) {
213
- this.filteredList = rawList
214
- }else {
215
- this.filteredList = []
242
+ if (rawList.length) {
243
+ this.filteredList = rawList;
244
+ } else {
245
+ this.filteredList = [];
216
246
  }
217
- console.log("this.filteredList: ", this.filteredList)
218
- }
219
- }
220
- }
247
+ },
248
+ },
249
+ };
221
250
  </script>
222
251
 
223
252
  <style>
224
253
  .box-shadow {
225
- -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);
226
- -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);
227
- 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);
254
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
255
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
256
+ -moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
257
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
258
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
259
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
228
260
  }
229
261
 
230
262
  .sm-emoji-picker {
231
263
  width: 310px;
232
264
  z-index: 2;
233
- border: 1px solid #CCC;
265
+ border: 1px solid #ccc;
234
266
  border-radius: 5px;
235
- background-color: #FFF;
267
+ background-color: #fff;
236
268
  display: flex;
237
269
  flex-direction: column;
238
270
  }
@@ -243,7 +275,7 @@ export default {
243
275
  align-items: center;
244
276
  justify-content: space-between;
245
277
  margin: 10px 0;
246
- border-bottom: 1px solid #CCC;
278
+ border-bottom: 1px solid #ccc;
247
279
  }
248
280
 
249
281
  .sm-emoji-link {
@@ -252,7 +284,7 @@ export default {
252
284
  justify-content: center;
253
285
  align-items: center;
254
286
  cursor: pointer;
255
- opacity: .9;
287
+ opacity: 0.9;
256
288
  transition: all 200ms;
257
289
  border-bottom: 2px solid transparent;
258
290
  }
@@ -261,17 +293,19 @@ export default {
261
293
  padding: 0;
262
294
  fill: #999;
263
295
  }
264
- .sm-emoji-link:hover a > svg, .sm-emoji-link.active a > svg {
296
+ .sm-emoji-link:hover a > svg,
297
+ .sm-emoji-link.active a > svg {
265
298
  opacity: 1;
266
299
  fill: #666;
267
300
  }
268
- .sm-emoji-link:hover a > svg[stroke-linecap], .sm-emoji-link.active a > svg[stroke-linecap] {
301
+ .sm-emoji-link:hover a > svg[stroke-linecap],
302
+ .sm-emoji-link.active a > svg[stroke-linecap] {
269
303
  opacity: 1;
270
304
  fill: transparent;
271
305
  stroke: #666;
272
306
  }
273
307
  .sm-emoji-link.active {
274
- border-bottom: 2px solid #666
308
+ border-bottom: 2px solid #666;
275
309
  }
276
310
 
277
311
  .sm-emoji-scroll {
@@ -285,21 +319,21 @@ export default {
285
319
  scrollbar-width: 8px;
286
320
  position: relative;
287
321
  }
288
- .sm-emoji-scroll::-webkit-scrollbar{
322
+ .sm-emoji-scroll::-webkit-scrollbar {
289
323
  width: 8px;
290
324
  }
291
325
 
292
- .sm-emoji-scroll::-webkit-scrollbar-track{
326
+ .sm-emoji-scroll::-webkit-scrollbar-track {
293
327
  background-color: rgba(0, 0, 0, 0.2);
294
328
  }
295
329
 
296
- .sm-emoji-scroll::-webkit-scrollbar-thumb{
297
- transition-duration: .5s;
298
- background-color: #666
330
+ .sm-emoji-scroll::-webkit-scrollbar-thumb {
331
+ transition-duration: 0.5s;
332
+ background-color: #666;
299
333
  }
300
334
 
301
- .sm-emoji-scroll::-webkit-scrollbar-thumb:hover{
302
- background-color: #555
335
+ .sm-emoji-scroll::-webkit-scrollbar-thumb:hover {
336
+ background-color: #555;
303
337
  }
304
338
 
305
339
  .sm-emoji-search {
@@ -310,25 +344,27 @@ export default {
310
344
  position: sticky;
311
345
  top: 0;
312
346
  z-index: 1;
313
- background: #FFF;
347
+ background: #fff;
314
348
  padding-bottom: 10px;
315
349
  }
316
350
  .sm-emoji-search > input {
317
351
  width: 90%;
318
352
  outline: none;
319
- border: 1px solid #CCC;
353
+ border: 1px solid #ccc;
320
354
  border-radius: 2.5px;
321
355
  padding: 5px 10px;
322
356
  transition: border 200ms;
323
357
  }
324
- .sm-emoji-search > input:focus, .sm-emoji-search > input:active, .sm-emoji-search > input:hover {
358
+ .sm-emoji-search > input:focus,
359
+ .sm-emoji-search > input:active,
360
+ .sm-emoji-search > input:hover {
325
361
  outline: none;
326
362
  border: 1px solid #999;
327
363
  }
328
364
  .sm-emoji-search.sticky {
329
365
  position: fixed;
330
366
  width: 310px;
331
- background-color: #FFF;
367
+ background-color: #fff;
332
368
  }
333
369
 
334
370
  .sm-emoji-selection {
@@ -340,7 +376,7 @@ export default {
340
376
  display: flex;
341
377
  justify-content: flex-start;
342
378
  align-items: center;
343
- background-color: #F7F7F7;
379
+ background-color: #f7f7f7;
344
380
  padding: 5px 0;
345
381
  white-space: nowrap;
346
382
  text-overflow: ellipsis;
@@ -352,14 +388,14 @@ export default {
352
388
 
353
389
  .sm-emoji-group {
354
390
  width: 100%;
355
- display: flex;
356
- flex-wrap: wrap;
357
- font-size: 1.375rem
391
+ display: flex;
392
+ flex-wrap: wrap;
393
+ font-size: 22px;
358
394
  }
359
395
 
360
396
  .sm-emoji-item {
361
397
  cursor: pointer;
362
- opacity: .8;
398
+ opacity: 0.8;
363
399
  transition: opacity 200ms;
364
400
  margin: 3.5px;
365
401
  }
package/src/lib-components/Chat/SingleFilePreview.vue CHANGED
@@ -1,14 +1,15 @@
1
1
  <template>
2
- <div class="single-file-preview">
2
+ <div v-if="textId" class="single-file-preview" :ref="`sfp-${textId}`">
3
+ <fa-icon :icon="['fas', 'times-circle']" class="close-icon" @click="$emit('close')" />
3
4
  <span @click="deleteFile" :title="dictionary.msg_cancelar_anexo" class="text-footer-exclude-file">
4
- <fa-icon :icon="['fas', 'times-circle']" />
5
+ <fa-icon :icon="['fas', 'trash-alt']" />
5
6
  </span>
6
7
  <div class="text-footer-invalid-format" v-if="fileFormatError">
7
8
  <h3 v-text="dictionary.titulo_msg_formato_invalido"></h3>
8
- <h4 v-text="validFileFormats"></h4>
9
+ <h4 v-text="validFileFormats" :title="validFileFormats"></h4>
9
10
  </div>
10
11
  <template v-else>
11
- <h3 v-if="file.name" class="text-footer-preview-title">
12
+ <h3 v-if="file.name" class="text-footer-preview-title" :title="file.name">
12
13
  <fa-icon :icon="['fas', 'file-alt']" v-if="isDoc" />
13
14
  <fa-icon :icon="['fas', 'image']" v-else />
14
15
  {{ file.name }}
@@ -23,25 +24,45 @@
23
24
  <script>
24
25
  export default {
25
26
  props: {
27
+ textId: { type: String, required: true },
26
28
  dictionary: { type: Object, required: true },
27
- file: { type: File, required: true },
29
+ file: { type: File, required: false },
28
30
  isDoc: { type: Boolean, required: false },
29
31
  fileFormatError: { type: Boolean, required: false },
30
32
  validFileFormats: { type: String, required: false, default: "" },
31
33
  imagePreview: { type: String, required: false }
32
34
  },
35
+ mounted() {
36
+ this.setPosition()
37
+ },
33
38
  methods: {
34
39
  deleteFile() {
35
40
  this.$emit("delete-file")
36
41
  },
37
42
  openImage() {
38
43
  this.$emit("open-image")
44
+ },
45
+ setPosition() {
46
+ try {
47
+ this.$refs[`sfp-${this.textId}`].parentElement.style.bottom = `${this.$root.$refs[`tf-${this.textId}`].$el.offsetHeight}px`
48
+ }catch(e) {
49
+ console.error("Erro ao setar a posicao do single file preview: ", e)
50
+ }
39
51
  }
40
52
  }
41
53
  }
42
54
  </script>
43
55
 
44
56
  <style>
57
+ .single-file-preview .close-icon {
58
+ color: #E74C3C;
59
+ cursor: pointer;
60
+ opacity: .9;
61
+ transition: opacity 300ms;
62
+ }
63
+ .single-file-preview .close-icon:hover {
64
+ opacity: 1;
65
+ }
45
66
  .text-footer-invalid-format {
46
67
  color: #222;
47
68
  padding: 10px;
@@ -50,10 +71,10 @@ export default {
50
71
  font-weight: 500;
51
72
  }
52
73
  .text-footer-invalid-format h4 {
53
- font-size: .9rem;
74
+ font-size: 14.4px;
54
75
  }
55
76
  .text-footer-preview-title {
56
- font-size: 1rem;
77
+ font-size: 16px;
57
78
  padding: 10px 0 0 10px;
58
79
  white-space: nowrap;
59
80
  overflow: hidden;