vue-intergrall-plugins 0.0.295 → 0.0.296

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 (7) hide show
  1. package/dist/vue-intergrall-plugins.esm.js +10 -31
  2. package/dist/vue-intergrall-plugins.min.js +1 -1
  3. package/dist/vue-intergrall-plugins.ssr.js +35 -38
  4. package/package.json +1 -1
  5. package/src/lib-components/Chat/Picker.vue +182 -147
  6. package/src/lib-components/Messages/CardMessages.vue +14 -14
  7. package/src/lib-components/Messages/ChatMessages.vue +31 -4
package/src/lib-components/Chat/Picker.vue CHANGED
@@ -2,14 +2,14 @@
2
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 v-if="allEmojis.emojis && allEmojis.emojis[emojiKey] && allEmojis.emojis[emojiKey].finalEmoji" @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,186 +77,192 @@ 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(() => { this.loading = false; }, 1500)
172
+ } catch (e) {
173
+ console.error("Erro ao carregar os emojis");
174
+ console.error(e);
148
175
  }
149
176
  },
150
177
  getRecentEmojis() {
151
- const recentEmojis = localStorage.getItem("recent-emojis")
152
- if(recentEmojis) return recentEmojis.split(",")
153
- return []
178
+ const recentEmojis = localStorage.getItem("recent-emojis");
179
+ if (recentEmojis) return recentEmojis.split(",");
180
+ return [];
154
181
  },
155
182
  setEmojiOnLocalStorage(emojiKey) {
156
183
  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(",")}`
184
+ let finalStr = "";
185
+ const recentEmojis = localStorage.getItem("recent-emojis");
186
+ if (recentEmojis) {
187
+ const arrRecent = recentEmojis.split(",");
188
+ if (!arrRecent.includes(emojiKey)) {
189
+ if (arrRecent.length < 20) {
190
+ finalStr = `${emojiKey},${recentEmojis}`;
191
+ } else {
192
+ arrRecent.pop();
193
+ finalStr = `${emojiKey},${arrRecent.join(",")}`;
167
194
  }
168
195
  }
169
- }else {
170
- finalStr = `${emojiKey}`
196
+ } else {
197
+ finalStr = `${emojiKey}`;
171
198
  }
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
199
+ if (finalStr) {
200
+ localStorage.setItem("recent-emojis", finalStr);
201
+ const finalArr = finalStr.split(",").filter((str) => {
202
+ return str ? str : false;
203
+ });
204
+ this.allEmojis.categories[0].emojis = finalArr;
176
205
  }
177
- }catch(e) {
178
- console.error("Erro ao setar o emoji no localStorage")
179
- console.error(e)
206
+ } catch (e) {
207
+ console.error("Erro ao setar o emoji no localStorage");
208
+ console.error(e);
180
209
  }
181
-
182
210
  },
183
- addEmoji(emoji, emojiKey){
184
- this.setEmojiOnLocalStorage(emojiKey)
185
- this.$emit("insert-emoji", emoji)
211
+ addEmoji(emoji, emojiKey) {
212
+ this.setEmojiOnLocalStorage(emojiKey);
213
+ this.$emit("insert-emoji", emoji);
186
214
  },
187
215
  pickerHeaderHandler(e, id) {
188
216
  try {
189
- const { target } = e
190
- const { children } = target
191
- if(children.length) {
192
- const tag = children[0]
193
- tag.getAttribute("href") ? tag.click() : ""
217
+ const { target } = e;
218
+ const { children } = target;
219
+ if (children.length) {
220
+ const tag = children[0];
221
+ tag.getAttribute("href") ? tag.click() : "";
194
222
  }
195
- this.categoriaSelecionada = id
196
- }catch(e) {
197
- console.error("Erro ao mudar de categoria")
198
- console.error(e)
223
+ this.categoriaSelecionada = id;
224
+ } catch (e) {
225
+ console.error("Erro ao mudar de categoria");
226
+ console.error(e);
199
227
  }
200
228
  },
201
229
  filterEmojis() {
202
- if(!this.search.trim("")) return this.filteredList = []
230
+ if (!this.search.trim("")) return (this.filteredList = []);
203
231
 
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)
232
+ const rawList = [];
233
+ for (let key in this.allEmojis.emojis) {
234
+ const emoji = this.allEmojis.emojis[key];
235
+ const { a } = emoji;
236
+ const search = this.search.toUpperCase();
237
+ const upperA = a.toUpperCase();
238
+ if (upperA.indexOf(search) >= 0) rawList.push(emoji);
211
239
  }
212
- if(rawList.length) {
213
- this.filteredList = rawList
214
- }else {
215
- this.filteredList = []
240
+ if (rawList.length) {
241
+ this.filteredList = rawList;
242
+ } else {
243
+ this.filteredList = [];
216
244
  }
217
- }
218
- }
219
- }
245
+ },
246
+ },
247
+ };
220
248
  </script>
221
249
 
222
250
  <style>
223
251
  .box-shadow {
224
- -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);
225
- -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);
226
- 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);
252
+ -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
253
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
254
+ -moz-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
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
257
+ 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
227
258
  }
228
259
 
229
260
  .sm-emoji-picker {
230
261
  width: 310px;
231
262
  z-index: 2;
232
- border: 1px solid #CCC;
263
+ border: 1px solid #ccc;
233
264
  border-radius: 5px;
234
- background-color: #FFF;
265
+ background-color: #fff;
235
266
  display: flex;
236
267
  flex-direction: column;
237
268
  }
@@ -242,7 +273,7 @@ export default {
242
273
  align-items: center;
243
274
  justify-content: space-between;
244
275
  margin: 10px 0;
245
- border-bottom: 1px solid #CCC;
276
+ border-bottom: 1px solid #ccc;
246
277
  }
247
278
 
248
279
  .sm-emoji-link {
@@ -251,7 +282,7 @@ export default {
251
282
  justify-content: center;
252
283
  align-items: center;
253
284
  cursor: pointer;
254
- opacity: .9;
285
+ opacity: 0.9;
255
286
  transition: all 200ms;
256
287
  border-bottom: 2px solid transparent;
257
288
  }
@@ -260,17 +291,19 @@ export default {
260
291
  padding: 0;
261
292
  fill: #999;
262
293
  }
263
- .sm-emoji-link:hover a > svg, .sm-emoji-link.active a > svg {
294
+ .sm-emoji-link:hover a > svg,
295
+ .sm-emoji-link.active a > svg {
264
296
  opacity: 1;
265
297
  fill: #666;
266
298
  }
267
- .sm-emoji-link:hover a > svg[stroke-linecap], .sm-emoji-link.active a > svg[stroke-linecap] {
299
+ .sm-emoji-link:hover a > svg[stroke-linecap],
300
+ .sm-emoji-link.active a > svg[stroke-linecap] {
268
301
  opacity: 1;
269
302
  fill: transparent;
270
303
  stroke: #666;
271
304
  }
272
305
  .sm-emoji-link.active {
273
- border-bottom: 2px solid #666
306
+ border-bottom: 2px solid #666;
274
307
  }
275
308
 
276
309
  .sm-emoji-scroll {
@@ -284,21 +317,21 @@ export default {
284
317
  scrollbar-width: 8px;
285
318
  position: relative;
286
319
  }
287
- .sm-emoji-scroll::-webkit-scrollbar{
320
+ .sm-emoji-scroll::-webkit-scrollbar {
288
321
  width: 8px;
289
322
  }
290
323
 
291
- .sm-emoji-scroll::-webkit-scrollbar-track{
324
+ .sm-emoji-scroll::-webkit-scrollbar-track {
292
325
  background-color: rgba(0, 0, 0, 0.2);
293
326
  }
294
327
 
295
- .sm-emoji-scroll::-webkit-scrollbar-thumb{
296
- transition-duration: .5s;
297
- background-color: #666
328
+ .sm-emoji-scroll::-webkit-scrollbar-thumb {
329
+ transition-duration: 0.5s;
330
+ background-color: #666;
298
331
  }
299
332
 
300
- .sm-emoji-scroll::-webkit-scrollbar-thumb:hover{
301
- background-color: #555
333
+ .sm-emoji-scroll::-webkit-scrollbar-thumb:hover {
334
+ background-color: #555;
302
335
  }
303
336
 
304
337
  .sm-emoji-search {
@@ -309,25 +342,27 @@ export default {
309
342
  position: sticky;
310
343
  top: 0;
311
344
  z-index: 1;
312
- background: #FFF;
345
+ background: #fff;
313
346
  padding-bottom: 10px;
314
347
  }
315
348
  .sm-emoji-search > input {
316
349
  width: 90%;
317
350
  outline: none;
318
- border: 1px solid #CCC;
351
+ border: 1px solid #ccc;
319
352
  border-radius: 2.5px;
320
353
  padding: 5px 10px;
321
354
  transition: border 200ms;
322
355
  }
323
- .sm-emoji-search > input:focus, .sm-emoji-search > input:active, .sm-emoji-search > input:hover {
356
+ .sm-emoji-search > input:focus,
357
+ .sm-emoji-search > input:active,
358
+ .sm-emoji-search > input:hover {
324
359
  outline: none;
325
360
  border: 1px solid #999;
326
361
  }
327
362
  .sm-emoji-search.sticky {
328
363
  position: fixed;
329
364
  width: 310px;
330
- background-color: #FFF;
365
+ background-color: #fff;
331
366
  }
332
367
 
333
368
  .sm-emoji-selection {
@@ -339,7 +374,7 @@ export default {
339
374
  display: flex;
340
375
  justify-content: flex-start;
341
376
  align-items: center;
342
- background-color: #F7F7F7;
377
+ background-color: #f7f7f7;
343
378
  padding: 5px 0;
344
379
  white-space: nowrap;
345
380
  text-overflow: ellipsis;
@@ -351,14 +386,14 @@ export default {
351
386
 
352
387
  .sm-emoji-group {
353
388
  width: 100%;
354
- display: flex;
355
- flex-wrap: wrap;
356
- font-size: 1.375rem
389
+ display: flex;
390
+ flex-wrap: wrap;
391
+ font-size: 1.375rem;
357
392
  }
358
393
 
359
394
  .sm-emoji-item {
360
395
  cursor: pointer;
361
- opacity: .8;
396
+ opacity: 0.8;
362
397
  transition: opacity 200ms;
363
398
  margin: 3.5px;
364
399
  }
package/src/lib-components/Messages/CardMessages.vue CHANGED
@@ -265,12 +265,12 @@ export default {
265
265
  const validKeys = [
266
266
  "name",
267
267
  "value",
268
- "ticket_detail_id",
269
- "ticket_detail_type_id",
270
- "creation_date",
271
- "modification_date",
268
+ // "ticket_detail_id",
269
+ // "ticket_detail_type_id",
270
+ // "creation_date",
271
+ // "modification_date",
272
272
  ];
273
- const validIds = [1, 2, 4, 5, 6, 7, 9, 10, 11, 12, 13, 14, 25, 33, 34, 36];
273
+ const validIds = [7];
274
274
  this.interatividade.forEach((values) => {
275
275
  if (validIds.includes(values.ticket_detail_type_id)) {
276
276
  const currentKeys = Object.keys(values);
@@ -281,15 +281,15 @@ export default {
281
281
  currentKeys.forEach((key) => {
282
282
  if (validKeys.includes(key)) {
283
283
  let formattedKey = "";
284
- if (key === "ticket_detail_id") {
285
- formattedKey = this.dictionary.ra_ticket_detail_id_title;
286
- } else if (key === "ticket_detail_type_id") {
287
- formattedKey = this.dictionary.ra_ticket_detail_type_id_title;
288
- } else if (key === "creation_date") {
289
- formattedKey = this.dictionary.ra_creation_date_title;
290
- } else if (key === "modification_date") {
291
- formattedKey = this.dictionary.ra_creation_modification_title;
292
- }
284
+ // if (key === "ticket_detail_id") {
285
+ // formattedKey = this.dictionary.ra_ticket_detail_id_title;
286
+ // } else if (key === "ticket_detail_type_id") {
287
+ // formattedKey = this.dictionary.ra_ticket_detail_type_id_title;
288
+ // } else if (key === "creation_date") {
289
+ // formattedKey = this.dictionary.ra_creation_date_title;
290
+ // } else if (key === "modification_date") {
291
+ // formattedKey = this.dictionary.ra_creation_modification_title;
292
+ // }
293
293
  if (formattedKey) {
294
294
  formattedValues[formattedKey] = values[key];
295
295
  }
package/src/lib-components/Messages/ChatMessages.vue CHANGED
@@ -1000,13 +1000,36 @@ export default {
1000
1000
  .emoji-message-container {
1001
1001
  position: absolute;
1002
1002
  top: 0;
1003
- left: 0;
1004
- right: 0;
1003
+ z-index: 1;
1004
+ width: 300px;
1005
+ height: 250px;
1006
+ }
1007
+ /* .emoji-message-container {
1008
+ z-index: 1;
1009
+ overflow: hidden;
1010
+ width: 300px;
1011
+ height: 250px;
1012
+
1013
+ >.sm-emoji-picker {
1014
+ position: relative;
1015
+ width: 300px;
1016
+ height: 250px;
1017
+ }
1005
1018
  }
1006
1019
 
1020
+ .mensagem .reaction {
1021
+ $size: 1.8em;
1022
+ width: $size;
1023
+ height: $size;
1024
+ min-width: $size;
1025
+ min-height: $size;
1026
+ max-width: $size;
1027
+ max-height: $size;
1028
+ } */
1029
+
1007
1030
  .emoji-message-container .sm-emoji-picker {
1008
- height: 200px;
1009
- width: 90% !important;
1031
+ width: 300px;
1032
+ height: 250px;
1010
1033
  }
1011
1034
  .emoji-message-container .sm-emoji-picker .sm-emoji-header {
1012
1035
  overflow-x: auto;
@@ -1023,6 +1046,10 @@ export default {
1023
1046
  background-color: rgba(100, 100, 100, 0.4);
1024
1047
  padding: 5px;
1025
1048
  font-size: 1.3em;
1049
+ min-width: 1.8em;
1050
+ min-height: 1.8em;
1051
+ max-width: 1.8em;
1052
+ max-height: 1.8em;
1026
1053
  }
1027
1054
 
1028
1055
  .reaction > span {