vue-intergrall-plugins 0.0.295 → 0.0.297
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.
- package/dist/vue-intergrall-plugins.esm.js +10 -28
- package/dist/vue-intergrall-plugins.min.js +1 -1
- package/dist/vue-intergrall-plugins.ssr.js +36 -34
- package/package.json +1 -1
- package/src/lib-components/Chat/BtnEmojis.vue +50 -44
- package/src/lib-components/Chat/Picker.vue +184 -147
- package/src/lib-components/Messages/CardMessages.vue +39 -15
- package/src/lib-components/Messages/ChatMessages.vue +31 -4
|
@@ -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="{
|
|
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
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
|
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,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")
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
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
|
-
|
|
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(() => {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
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 =
|
|
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 => {
|
|
175
|
-
|
|
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
|
-
}
|
|
218
|
-
}
|
|
219
|
-
}
|
|
247
|
+
},
|
|
248
|
+
},
|
|
249
|
+
};
|
|
220
250
|
</script>
|
|
221
251
|
|
|
222
252
|
<style>
|
|
223
253
|
.box-shadow {
|
|
224
|
-
-webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
|
225
|
-
|
|
226
|
-
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
|
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);
|
|
227
260
|
}
|
|
228
261
|
|
|
229
262
|
.sm-emoji-picker {
|
|
230
263
|
width: 310px;
|
|
231
264
|
z-index: 2;
|
|
232
|
-
border: 1px solid #
|
|
265
|
+
border: 1px solid #ccc;
|
|
233
266
|
border-radius: 5px;
|
|
234
|
-
background-color: #
|
|
267
|
+
background-color: #fff;
|
|
235
268
|
display: flex;
|
|
236
269
|
flex-direction: column;
|
|
237
270
|
}
|
|
@@ -242,7 +275,7 @@ export default {
|
|
|
242
275
|
align-items: center;
|
|
243
276
|
justify-content: space-between;
|
|
244
277
|
margin: 10px 0;
|
|
245
|
-
border-bottom: 1px solid #
|
|
278
|
+
border-bottom: 1px solid #ccc;
|
|
246
279
|
}
|
|
247
280
|
|
|
248
281
|
.sm-emoji-link {
|
|
@@ -251,7 +284,7 @@ export default {
|
|
|
251
284
|
justify-content: center;
|
|
252
285
|
align-items: center;
|
|
253
286
|
cursor: pointer;
|
|
254
|
-
opacity: .9;
|
|
287
|
+
opacity: 0.9;
|
|
255
288
|
transition: all 200ms;
|
|
256
289
|
border-bottom: 2px solid transparent;
|
|
257
290
|
}
|
|
@@ -260,17 +293,19 @@ export default {
|
|
|
260
293
|
padding: 0;
|
|
261
294
|
fill: #999;
|
|
262
295
|
}
|
|
263
|
-
.sm-emoji-link:hover a > svg,
|
|
296
|
+
.sm-emoji-link:hover a > svg,
|
|
297
|
+
.sm-emoji-link.active a > svg {
|
|
264
298
|
opacity: 1;
|
|
265
299
|
fill: #666;
|
|
266
300
|
}
|
|
267
|
-
.sm-emoji-link:hover a > svg[stroke-linecap],
|
|
301
|
+
.sm-emoji-link:hover a > svg[stroke-linecap],
|
|
302
|
+
.sm-emoji-link.active a > svg[stroke-linecap] {
|
|
268
303
|
opacity: 1;
|
|
269
304
|
fill: transparent;
|
|
270
305
|
stroke: #666;
|
|
271
306
|
}
|
|
272
307
|
.sm-emoji-link.active {
|
|
273
|
-
border-bottom: 2px solid #666
|
|
308
|
+
border-bottom: 2px solid #666;
|
|
274
309
|
}
|
|
275
310
|
|
|
276
311
|
.sm-emoji-scroll {
|
|
@@ -284,21 +319,21 @@ export default {
|
|
|
284
319
|
scrollbar-width: 8px;
|
|
285
320
|
position: relative;
|
|
286
321
|
}
|
|
287
|
-
.sm-emoji-scroll::-webkit-scrollbar{
|
|
322
|
+
.sm-emoji-scroll::-webkit-scrollbar {
|
|
288
323
|
width: 8px;
|
|
289
324
|
}
|
|
290
325
|
|
|
291
|
-
.sm-emoji-scroll::-webkit-scrollbar-track{
|
|
326
|
+
.sm-emoji-scroll::-webkit-scrollbar-track {
|
|
292
327
|
background-color: rgba(0, 0, 0, 0.2);
|
|
293
328
|
}
|
|
294
329
|
|
|
295
|
-
.sm-emoji-scroll::-webkit-scrollbar-thumb{
|
|
296
|
-
transition-duration: .5s;
|
|
297
|
-
background-color: #666
|
|
330
|
+
.sm-emoji-scroll::-webkit-scrollbar-thumb {
|
|
331
|
+
transition-duration: 0.5s;
|
|
332
|
+
background-color: #666;
|
|
298
333
|
}
|
|
299
334
|
|
|
300
|
-
.sm-emoji-scroll::-webkit-scrollbar-thumb:hover{
|
|
301
|
-
background-color: #555
|
|
335
|
+
.sm-emoji-scroll::-webkit-scrollbar-thumb:hover {
|
|
336
|
+
background-color: #555;
|
|
302
337
|
}
|
|
303
338
|
|
|
304
339
|
.sm-emoji-search {
|
|
@@ -309,25 +344,27 @@ export default {
|
|
|
309
344
|
position: sticky;
|
|
310
345
|
top: 0;
|
|
311
346
|
z-index: 1;
|
|
312
|
-
background: #
|
|
347
|
+
background: #fff;
|
|
313
348
|
padding-bottom: 10px;
|
|
314
349
|
}
|
|
315
350
|
.sm-emoji-search > input {
|
|
316
351
|
width: 90%;
|
|
317
352
|
outline: none;
|
|
318
|
-
border: 1px solid #
|
|
353
|
+
border: 1px solid #ccc;
|
|
319
354
|
border-radius: 2.5px;
|
|
320
355
|
padding: 5px 10px;
|
|
321
356
|
transition: border 200ms;
|
|
322
357
|
}
|
|
323
|
-
.sm-emoji-search > input:focus,
|
|
358
|
+
.sm-emoji-search > input:focus,
|
|
359
|
+
.sm-emoji-search > input:active,
|
|
360
|
+
.sm-emoji-search > input:hover {
|
|
324
361
|
outline: none;
|
|
325
362
|
border: 1px solid #999;
|
|
326
363
|
}
|
|
327
364
|
.sm-emoji-search.sticky {
|
|
328
365
|
position: fixed;
|
|
329
366
|
width: 310px;
|
|
330
|
-
background-color: #
|
|
367
|
+
background-color: #fff;
|
|
331
368
|
}
|
|
332
369
|
|
|
333
370
|
.sm-emoji-selection {
|
|
@@ -339,7 +376,7 @@ export default {
|
|
|
339
376
|
display: flex;
|
|
340
377
|
justify-content: flex-start;
|
|
341
378
|
align-items: center;
|
|
342
|
-
background-color: #
|
|
379
|
+
background-color: #f7f7f7;
|
|
343
380
|
padding: 5px 0;
|
|
344
381
|
white-space: nowrap;
|
|
345
382
|
text-overflow: ellipsis;
|
|
@@ -351,14 +388,14 @@ export default {
|
|
|
351
388
|
|
|
352
389
|
.sm-emoji-group {
|
|
353
390
|
width: 100%;
|
|
354
|
-
display: flex;
|
|
355
|
-
flex-wrap: wrap;
|
|
356
|
-
font-size: 1.375rem
|
|
391
|
+
display: flex;
|
|
392
|
+
flex-wrap: wrap;
|
|
393
|
+
font-size: 1.375rem;
|
|
357
394
|
}
|
|
358
395
|
|
|
359
396
|
.sm-emoji-item {
|
|
360
397
|
cursor: pointer;
|
|
361
|
-
opacity: .8;
|
|
398
|
+
opacity: 0.8;
|
|
362
399
|
transition: opacity 200ms;
|
|
363
400
|
margin: 3.5px;
|
|
364
401
|
}
|
|
@@ -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 = [
|
|
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
|
-
|
|
286
|
-
} else if (key === "ticket_detail_type_id") {
|
|
287
|
-
|
|
288
|
-
} else if (key === "creation_date") {
|
|
289
|
-
|
|
290
|
-
} else if (key === "modification_date") {
|
|
291
|
-
|
|
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
|
}
|
|
@@ -390,6 +390,8 @@ export default {
|
|
|
390
390
|
overflow: hidden;
|
|
391
391
|
width: 100%;
|
|
392
392
|
padding: 2.5px 5px;
|
|
393
|
+
border-radius: 7px;
|
|
394
|
+
box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 3px 0px;
|
|
393
395
|
}
|
|
394
396
|
.card p {
|
|
395
397
|
word-break: break-all;
|
|
@@ -401,6 +403,7 @@ export default {
|
|
|
401
403
|
margin-bottom: 5px;
|
|
402
404
|
display: flex;
|
|
403
405
|
justify-content: space-between;
|
|
406
|
+
padding: 10px 5px;
|
|
404
407
|
}
|
|
405
408
|
.card-header svg {
|
|
406
409
|
font-size: 1rem;
|
|
@@ -415,8 +418,19 @@ export default {
|
|
|
415
418
|
display: flex;
|
|
416
419
|
flex-direction: column;
|
|
417
420
|
margin-right: 10px;
|
|
421
|
+
background: rgb(0, 136, 69);
|
|
422
|
+
padding: 5px 10px;
|
|
423
|
+
border-top-left-radius: 15px;
|
|
424
|
+
border-bottom-left-radius: 15px;
|
|
425
|
+
color: #fff;
|
|
418
426
|
}
|
|
419
427
|
|
|
428
|
+
.card-right {
|
|
429
|
+
margin-right: -20px;
|
|
430
|
+
display: flex;
|
|
431
|
+
flex-direction: row-reverse;
|
|
432
|
+
align-items: center;
|
|
433
|
+
}
|
|
420
434
|
.card-data {
|
|
421
435
|
overflow: hidden;
|
|
422
436
|
display: flex;
|
|
@@ -436,7 +450,7 @@ export default {
|
|
|
436
450
|
display: flex;
|
|
437
451
|
justify-content: center;
|
|
438
452
|
align-items: center;
|
|
439
|
-
margin:
|
|
453
|
+
margin: 0 10px;
|
|
440
454
|
cursor: pointer;
|
|
441
455
|
opacity: 0.8;
|
|
442
456
|
transition: opacity 150ms;
|
|
@@ -459,6 +473,16 @@ export default {
|
|
|
459
473
|
gap: 5px;
|
|
460
474
|
}
|
|
461
475
|
|
|
476
|
+
.card-autor {
|
|
477
|
+
display: flex;
|
|
478
|
+
align-items: center;
|
|
479
|
+
margin-right: 10px;
|
|
480
|
+
overflow: hidden;
|
|
481
|
+
min-width: 14px;
|
|
482
|
+
max-width: calc(100% - 215px);
|
|
483
|
+
gap: 5px;
|
|
484
|
+
}
|
|
485
|
+
|
|
462
486
|
.card-chip {
|
|
463
487
|
font-size: 0.8rem;
|
|
464
488
|
width: fit-content;
|