vue-intergrall-plugins 1.1.51 → 1.1.53
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/dist/vue-intergrall-plugins.css +1 -0
- package/dist/vue-intergrall-plugins.esm.js +142 -75
- package/dist/vue-intergrall-plugins.min.js +2 -2
- package/dist/vue-intergrall-plugins.ssr.js +156 -96
- package/package.json +58 -55
- package/src/lib-components/Chat/Picker.vue +510 -405
- package/src/lib-components/Email/EmailItem.vue +741 -1340
- package/src/lib-components/Messages/CardMessages.vue +5 -5
- package/src/lib-components/Messages/ChatMessages.vue +2 -483
|
@@ -1,405 +1,510 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="sm-emoji-picker box-shadow" @click.stop>
|
|
3
|
-
<SkeletonPicker v-if="loading" />
|
|
4
|
-
<div class="sm-emoji-header">
|
|
5
|
-
<span
|
|
6
|
-
class="sm-emoji-link"
|
|
7
|
-
v-for="(category, indexCategoryHeader) in allEmojis.categories"
|
|
8
|
-
:key="`ich-${indexCategoryHeader}`"
|
|
9
|
-
:title="category.name"
|
|
10
|
-
:class="{ active: categoriaSelecionada == category.id }"
|
|
11
|
-
@click="pickerHeaderHandler($event, category.id)"
|
|
12
|
-
v-html="
|
|
13
|
-
></span>
|
|
14
|
-
</div>
|
|
15
|
-
<div class="sm-emoji-scroll" ref="sm-scroll">
|
|
16
|
-
<div class="sm-emoji-search" ref="sm-search">
|
|
17
|
-
<input type="text" name="emoji-search" @input="
|
|
18
|
-
</div>
|
|
19
|
-
<template v-if="!filteredList.length">
|
|
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>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</template>
|
|
52
|
-
<template v-else>
|
|
53
|
-
<div class="sm-emoji-group">
|
|
54
|
-
<div
|
|
55
|
-
class="sm-emoji-item"
|
|
56
|
-
v-for="(emoji, key) in filteredList"
|
|
57
|
-
:key="`ees-${key}`"
|
|
58
|
-
>
|
|
59
|
-
<span @click="addEmoji(emoji)"> {{ emoji.finalEmoji }} </span>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
</template>
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
try {
|
|
109
|
-
const
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
console.error(
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
const
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
.
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
.
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
.
|
|
308
|
-
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
.
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
.
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
.sm-emoji-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
.
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
.sm-emoji-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
.sm-emoji-
|
|
403
|
-
opacity: 1;
|
|
404
|
-
|
|
405
|
-
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="`sm-emoji-picker box-shadow ${!fullView ? 'small' : ''}`" @click.stop>
|
|
3
|
+
<SkeletonPicker v-if="loading" />
|
|
4
|
+
<div class="sm-emoji-header" v-show="fullView">
|
|
5
|
+
<span
|
|
6
|
+
class="sm-emoji-link"
|
|
7
|
+
v-for="(category, indexCategoryHeader) in allEmojis.categories"
|
|
8
|
+
:key="`ich-${indexCategoryHeader}`"
|
|
9
|
+
:title="category.name"
|
|
10
|
+
:class="{ active: categoriaSelecionada == category.id }"
|
|
11
|
+
@click="pickerHeaderHandler($event, category.id)"
|
|
12
|
+
v-html="category.svg"
|
|
13
|
+
></span>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="sm-emoji-scroll" ref="sm-scroll">
|
|
16
|
+
<div class="sm-emoji-search" ref="sm-search" v-show="fullView">
|
|
17
|
+
<input type="text" name="emoji-search" @input="onSearchInput" v-model="search" />
|
|
18
|
+
</div>
|
|
19
|
+
<template v-if="!filteredList.length && fullView">
|
|
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>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</template>
|
|
52
|
+
<template v-else-if="filteredList.length && fullView">
|
|
53
|
+
<div class="sm-emoji-group">
|
|
54
|
+
<div
|
|
55
|
+
class="sm-emoji-item"
|
|
56
|
+
v-for="(emoji, key) in filteredList"
|
|
57
|
+
:key="`ees-${key}`"
|
|
58
|
+
>
|
|
59
|
+
<span @click="addEmoji(emoji)"> {{ emoji.finalEmoji }} </span>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</template>
|
|
63
|
+
<template v-else-if="!fullView">
|
|
64
|
+
<div class="sm-emoji-group">
|
|
65
|
+
<div
|
|
66
|
+
class="sm-emoji-item"
|
|
67
|
+
v-for="(emojiKey, key) in recentEmojis"
|
|
68
|
+
:key="`eer-${key}`"
|
|
69
|
+
>
|
|
70
|
+
<span
|
|
71
|
+
v-if="
|
|
72
|
+
allEmojis.emojis &&
|
|
73
|
+
allEmojis.emojis[emojiKey] &&
|
|
74
|
+
allEmojis.emojis[emojiKey].finalEmoji
|
|
75
|
+
"
|
|
76
|
+
@click="addEmoji(allEmojis.emojis[emojiKey], emojiKey)"
|
|
77
|
+
>
|
|
78
|
+
{{ allEmojis.emojis[emojiKey].finalEmoji }}
|
|
79
|
+
</span>
|
|
80
|
+
</div>
|
|
81
|
+
<button class="sm-emoji-item add-more" @click="openFullPicker">
|
|
82
|
+
+
|
|
83
|
+
</button>
|
|
84
|
+
</div>
|
|
85
|
+
</template>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
<script>
|
|
91
|
+
import allEmojis from "../../services/emojis/all.json";
|
|
92
|
+
import SkeletonPicker from "./SkeletonPicker";
|
|
93
|
+
|
|
94
|
+
export default {
|
|
95
|
+
components: { SkeletonPicker },
|
|
96
|
+
props: {
|
|
97
|
+
hasLoading: {
|
|
98
|
+
type: Boolean,
|
|
99
|
+
default: true,
|
|
100
|
+
},
|
|
101
|
+
recentViewOnly: {
|
|
102
|
+
type: Boolean,
|
|
103
|
+
default: false,
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
computed: {
|
|
107
|
+
recentEmojis() {
|
|
108
|
+
try {
|
|
109
|
+
const recent = allEmojis.categories.find(cat => cat.id === 'recent');
|
|
110
|
+
const people = allEmojis.categories.find(cat => cat.id === 'people');
|
|
111
|
+
|
|
112
|
+
if(!recent && !people) throw new Error("Categorias 'recent' e 'people' não encontradas");
|
|
113
|
+
|
|
114
|
+
if(!recent.emojis && !people.emojis) throw new Error("Nenhum emoji encontrado nas categorias 'recent' e 'people'");
|
|
115
|
+
|
|
116
|
+
const sliceLimit = 7
|
|
117
|
+
|
|
118
|
+
if(!recent.emojis.length) return people.emojis.slice(0, sliceLimit);
|
|
119
|
+
|
|
120
|
+
return recent.emojis.slice(0, sliceLimit);
|
|
121
|
+
} catch (e) {
|
|
122
|
+
console.error("Erro ao obter os emojis recentes", e);
|
|
123
|
+
return [];
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
fullView() {
|
|
127
|
+
return this.forceFullPicker || !this.recentViewOnly;
|
|
128
|
+
},
|
|
129
|
+
},
|
|
130
|
+
data() {
|
|
131
|
+
return {
|
|
132
|
+
allEmojis: {},
|
|
133
|
+
categoriaSelecionada: "",
|
|
134
|
+
search: "",
|
|
135
|
+
filteredList: [],
|
|
136
|
+
loading: true,
|
|
137
|
+
isSticky: false,
|
|
138
|
+
forceFullPicker: false,
|
|
139
|
+
searchTimer: null
|
|
140
|
+
};
|
|
141
|
+
},
|
|
142
|
+
mounted() {
|
|
143
|
+
this.allEmojis = allEmojis;
|
|
144
|
+
this.loadEmojis();
|
|
145
|
+
},
|
|
146
|
+
methods: {
|
|
147
|
+
onSearchInput() {
|
|
148
|
+
clearTimeout(this.searchTimer);
|
|
149
|
+
this.searchTimer = setTimeout(() => this.filterEmojis(), 180);
|
|
150
|
+
},
|
|
151
|
+
openFullPicker() {
|
|
152
|
+
this.forceFullPicker = true;
|
|
153
|
+
},
|
|
154
|
+
emojiHeaders() {
|
|
155
|
+
try {
|
|
156
|
+
const emojis = {
|
|
157
|
+
recent: {
|
|
158
|
+
name: "Recentes",
|
|
159
|
+
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>`,
|
|
160
|
+
},
|
|
161
|
+
people: {
|
|
162
|
+
name: "Pessoas & Expressoes",
|
|
163
|
+
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>`,
|
|
164
|
+
},
|
|
165
|
+
nature: {
|
|
166
|
+
name: "Animais & Natureza",
|
|
167
|
+
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>`,
|
|
168
|
+
},
|
|
169
|
+
foods: {
|
|
170
|
+
name: "Comidas & Bebibas",
|
|
171
|
+
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>`,
|
|
172
|
+
},
|
|
173
|
+
activity: {
|
|
174
|
+
name: "Atividades",
|
|
175
|
+
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>`,
|
|
176
|
+
},
|
|
177
|
+
places: {
|
|
178
|
+
name: "Viagens & Lugares",
|
|
179
|
+
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>`,
|
|
180
|
+
},
|
|
181
|
+
objects: {
|
|
182
|
+
name: "Objetos",
|
|
183
|
+
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>`,
|
|
184
|
+
},
|
|
185
|
+
symbols: {
|
|
186
|
+
name: "Simbolos",
|
|
187
|
+
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>`,
|
|
188
|
+
},
|
|
189
|
+
flags: {
|
|
190
|
+
name: "Bandeiras",
|
|
191
|
+
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>`,
|
|
192
|
+
},
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
if (this.allEmojis.categories[0].id != "recent")
|
|
196
|
+
this.allEmojis.categories.unshift({
|
|
197
|
+
emojis: this.getRecentEmojis(),
|
|
198
|
+
id: "recent",
|
|
199
|
+
name: "",
|
|
200
|
+
});
|
|
201
|
+
this.allEmojis.categories = this.allEmojis.categories.filter((cat) => {
|
|
202
|
+
const { id } = cat;
|
|
203
|
+
if (emojis[id]) {
|
|
204
|
+
cat.name = emojis[id].name;
|
|
205
|
+
cat.svg = emojis[id].svg;
|
|
206
|
+
return cat;
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
} catch (e) {
|
|
210
|
+
console.error("Erro ao gerar os emojis headers");
|
|
211
|
+
console.error(e);
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
processEmojisInChunks() {
|
|
215
|
+
try {
|
|
216
|
+
const keys = Object.keys(this.allEmojis.emojis || {});
|
|
217
|
+
const chunkSize = 150;
|
|
218
|
+
let i = 0;
|
|
219
|
+
const process = () => {
|
|
220
|
+
const end = Math.min(i + chunkSize, keys.length);
|
|
221
|
+
for (let j = i; j < end; j++) {
|
|
222
|
+
const key = keys[j];
|
|
223
|
+
const keyCode = this.allEmojis.emojis[key];
|
|
224
|
+
if (!keyCode || keyCode.hasOwnProperty("finalEmoji")) continue;
|
|
225
|
+
const { b } = keyCode;
|
|
226
|
+
const hexPoints = b.split(/\s|-/);
|
|
227
|
+
const codePoints = hexPoints.map((hex) => parseInt(hex, 16));
|
|
228
|
+
const finalEmoji = String.fromCodePoint.apply(null, codePoints);
|
|
229
|
+
this.$set(this.allEmojis.emojis[key], "hexa", hexPoints.join(""));
|
|
230
|
+
this.$set(this.allEmojis.emojis[key], "finalEmoji", finalEmoji);
|
|
231
|
+
}
|
|
232
|
+
i = end;
|
|
233
|
+
if (i < keys.length) {
|
|
234
|
+
if (window.requestIdleCallback) requestIdleCallback(process);
|
|
235
|
+
else setTimeout(process, 0);
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
if (window.requestIdleCallback) requestIdleCallback(process);
|
|
239
|
+
else setTimeout(process, 0);
|
|
240
|
+
} catch (e) {
|
|
241
|
+
console.error("Erro ao gerar os emojis em chunks", e);
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
loadEmojis() {
|
|
245
|
+
try {
|
|
246
|
+
if(!this.hasLoading) {
|
|
247
|
+
this.loading = false;
|
|
248
|
+
return
|
|
249
|
+
}
|
|
250
|
+
this.emojiHeaders();
|
|
251
|
+
this.processEmojisInChunks();
|
|
252
|
+
this.loading = false;
|
|
253
|
+
} catch (e) {
|
|
254
|
+
console.error("Erro ao carregar os emojis");
|
|
255
|
+
console.error(e);
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
getRecentEmojis() {
|
|
259
|
+
const recentEmojis = localStorage.getItem("recent-emojis");
|
|
260
|
+
if (recentEmojis) return recentEmojis.split(",");
|
|
261
|
+
return [];
|
|
262
|
+
},
|
|
263
|
+
setEmojiOnLocalStorage(emojiKey) {
|
|
264
|
+
try {
|
|
265
|
+
let finalStr = "";
|
|
266
|
+
const recentEmojis = localStorage.getItem("recent-emojis");
|
|
267
|
+
if (recentEmojis) {
|
|
268
|
+
const arrRecent = recentEmojis.split(",");
|
|
269
|
+
if (!arrRecent.includes(emojiKey)) {
|
|
270
|
+
if (arrRecent.length < 20) {
|
|
271
|
+
finalStr = `${emojiKey},${recentEmojis}`;
|
|
272
|
+
} else {
|
|
273
|
+
arrRecent.pop();
|
|
274
|
+
finalStr = `${emojiKey},${arrRecent.join(",")}`;
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
} else {
|
|
278
|
+
finalStr = `${emojiKey}`;
|
|
279
|
+
}
|
|
280
|
+
if (finalStr) {
|
|
281
|
+
localStorage.setItem("recent-emojis", finalStr);
|
|
282
|
+
const finalArr = finalStr.split(",").filter((str) => {
|
|
283
|
+
return str ? str : false;
|
|
284
|
+
});
|
|
285
|
+
this.allEmojis.categories[0].emojis = finalArr;
|
|
286
|
+
}
|
|
287
|
+
} catch (e) {
|
|
288
|
+
console.error("Erro ao setar o emoji no localStorage");
|
|
289
|
+
console.error(e);
|
|
290
|
+
}
|
|
291
|
+
},
|
|
292
|
+
addEmoji(emoji, emojiKey) {
|
|
293
|
+
this.setEmojiOnLocalStorage(emojiKey);
|
|
294
|
+
this.$emit("insert-emoji", emoji);
|
|
295
|
+
},
|
|
296
|
+
pickerHeaderHandler(e, id) {
|
|
297
|
+
try {
|
|
298
|
+
const container = this.$refs["sm-scroll"];
|
|
299
|
+
const target = this.$el.querySelector(`#${id}`);
|
|
300
|
+
if (!container || !target) {
|
|
301
|
+
this.categoriaSelecionada = id;
|
|
302
|
+
return;
|
|
303
|
+
}
|
|
304
|
+
const containerRect = container.getBoundingClientRect();
|
|
305
|
+
const targetRect = target.getBoundingClientRect();
|
|
306
|
+
const offset = targetRect.top - containerRect.top + container.scrollTop;
|
|
307
|
+
container.scrollTo({ top: offset, behavior: "smooth" });
|
|
308
|
+
this.categoriaSelecionada = id;
|
|
309
|
+
} catch (e) {
|
|
310
|
+
console.error("Erro ao mudar de categoria", e);
|
|
311
|
+
}
|
|
312
|
+
},
|
|
313
|
+
filterEmojis() {
|
|
314
|
+
if (!this.search.trim()) return (this.filteredList = []);
|
|
315
|
+
|
|
316
|
+
const rawList = [];
|
|
317
|
+
for (let key in this.allEmojis.emojis) {
|
|
318
|
+
const emoji = this.allEmojis.emojis[key];
|
|
319
|
+
const { a } = emoji;
|
|
320
|
+
const search = this.search.toUpperCase();
|
|
321
|
+
const upperA = a.toUpperCase();
|
|
322
|
+
if (upperA.indexOf(search) >= 0) rawList.push(emoji);
|
|
323
|
+
}
|
|
324
|
+
this.filteredList = rawList;
|
|
325
|
+
},
|
|
326
|
+
},
|
|
327
|
+
};
|
|
328
|
+
</script>
|
|
329
|
+
|
|
330
|
+
<style>
|
|
331
|
+
.box-shadow {
|
|
332
|
+
-webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
|
333
|
+
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
|
334
|
+
-moz-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
|
335
|
+
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
|
336
|
+
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
|
|
337
|
+
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.sm-emoji-picker {
|
|
341
|
+
width: 306px;
|
|
342
|
+
height: 250px;
|
|
343
|
+
z-index: 2;
|
|
344
|
+
border: 1px solid #ccc;
|
|
345
|
+
border-radius: 5px;
|
|
346
|
+
background-color: #fff;
|
|
347
|
+
display: flex;
|
|
348
|
+
flex-direction: column;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.sm-emoji-picker.small {
|
|
352
|
+
height: 40px!important;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.sm-emoji-picker.small .sm-emoji-scroll {
|
|
356
|
+
height: 100%;
|
|
357
|
+
max-height: 100%;
|
|
358
|
+
}
|
|
359
|
+
.sm-emoji-picker.small .sm-emoji-scroll .sm-emoji-group {
|
|
360
|
+
justify-content: center;
|
|
361
|
+
align-items: center;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.add-more {
|
|
365
|
+
background: #f0f0f0;
|
|
366
|
+
border: 1px solid #ccc;
|
|
367
|
+
border-radius: 50%;
|
|
368
|
+
width: 26px;
|
|
369
|
+
height: 26px;
|
|
370
|
+
display: flex;
|
|
371
|
+
justify-content: center;
|
|
372
|
+
align-items: center;
|
|
373
|
+
font-size: 16px;
|
|
374
|
+
font-weight: bold;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.sm-emoji-header {
|
|
378
|
+
width: 100%;
|
|
379
|
+
display: flex;
|
|
380
|
+
align-items: center;
|
|
381
|
+
justify-content: space-between;
|
|
382
|
+
margin: 10px 0;
|
|
383
|
+
border-bottom: 1px solid #ccc;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.sm-emoji-link {
|
|
387
|
+
padding: 0 5px 5px 5px;
|
|
388
|
+
display: flex;
|
|
389
|
+
justify-content: center;
|
|
390
|
+
align-items: center;
|
|
391
|
+
cursor: pointer;
|
|
392
|
+
opacity: 0.9;
|
|
393
|
+
transition: all 200ms;
|
|
394
|
+
border-bottom: 2px solid transparent;
|
|
395
|
+
}
|
|
396
|
+
.sm-emoji-link a {
|
|
397
|
+
margin: 0;
|
|
398
|
+
padding: 0;
|
|
399
|
+
fill: #999;
|
|
400
|
+
}
|
|
401
|
+
.sm-emoji-link:hover a > svg,
|
|
402
|
+
.sm-emoji-link.active a > svg {
|
|
403
|
+
opacity: 1;
|
|
404
|
+
fill: #666;
|
|
405
|
+
}
|
|
406
|
+
.sm-emoji-link:hover a > svg[stroke-linecap],
|
|
407
|
+
.sm-emoji-link.active a > svg[stroke-linecap] {
|
|
408
|
+
opacity: 1;
|
|
409
|
+
fill: transparent;
|
|
410
|
+
stroke: #666;
|
|
411
|
+
}
|
|
412
|
+
.sm-emoji-link.active {
|
|
413
|
+
border-bottom: 2px solid #666;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.sm-emoji-scroll {
|
|
417
|
+
width: 100%;
|
|
418
|
+
height: calc(100% - 52px);
|
|
419
|
+
max-height: calc(100% - 52px);
|
|
420
|
+
scroll-behavior: smooth;
|
|
421
|
+
overflow-y: auto;
|
|
422
|
+
overflow-x: hidden;
|
|
423
|
+
scrollbar-color: #888 rgba(0, 0, 0, 0.2);
|
|
424
|
+
scrollbar-width: 8px;
|
|
425
|
+
position: relative;
|
|
426
|
+
}
|
|
427
|
+
.sm-emoji-scroll::-webkit-scrollbar {
|
|
428
|
+
width: 8px;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.sm-emoji-scroll::-webkit-scrollbar-track {
|
|
432
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.sm-emoji-scroll::-webkit-scrollbar-thumb {
|
|
436
|
+
transition-duration: 0.5s;
|
|
437
|
+
background-color: #666;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.sm-emoji-scroll::-webkit-scrollbar-thumb:hover {
|
|
441
|
+
background-color: #555;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.sm-emoji-search {
|
|
445
|
+
width: 100%;
|
|
446
|
+
display: flex;
|
|
447
|
+
align-items: center;
|
|
448
|
+
justify-content: center;
|
|
449
|
+
position: sticky;
|
|
450
|
+
top: 0;
|
|
451
|
+
z-index: 1;
|
|
452
|
+
background: #fff;
|
|
453
|
+
padding-bottom: 10px;
|
|
454
|
+
}
|
|
455
|
+
.sm-emoji-search > input {
|
|
456
|
+
width: 90%;
|
|
457
|
+
outline: none;
|
|
458
|
+
border: 1px solid #ccc;
|
|
459
|
+
border-radius: 2.5px;
|
|
460
|
+
padding: 5px 10px;
|
|
461
|
+
transition: border 200ms;
|
|
462
|
+
}
|
|
463
|
+
.sm-emoji-search > input:focus,
|
|
464
|
+
.sm-emoji-search > input:active,
|
|
465
|
+
.sm-emoji-search > input:hover {
|
|
466
|
+
outline: none;
|
|
467
|
+
border: 1px solid #999;
|
|
468
|
+
}
|
|
469
|
+
.sm-emoji-search.sticky {
|
|
470
|
+
position: fixed;
|
|
471
|
+
width: 310px;
|
|
472
|
+
background-color: #fff;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.sm-emoji-selection {
|
|
476
|
+
width: 100%;
|
|
477
|
+
margin-bottom: 10px;
|
|
478
|
+
}
|
|
479
|
+
.sm-emoji-title {
|
|
480
|
+
width: 100%;
|
|
481
|
+
display: flex;
|
|
482
|
+
justify-content: flex-start;
|
|
483
|
+
align-items: center;
|
|
484
|
+
background-color: #f7f7f7;
|
|
485
|
+
padding: 5px 0;
|
|
486
|
+
white-space: nowrap;
|
|
487
|
+
text-overflow: ellipsis;
|
|
488
|
+
overflow: hidden;
|
|
489
|
+
}
|
|
490
|
+
.sm-emoji-title svg {
|
|
491
|
+
margin: 0 5px;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.sm-emoji-group {
|
|
495
|
+
width: 100%;
|
|
496
|
+
display: flex;
|
|
497
|
+
flex-wrap: wrap;
|
|
498
|
+
font-size: 22px;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.sm-emoji-item {
|
|
502
|
+
cursor: pointer;
|
|
503
|
+
opacity: 0.8;
|
|
504
|
+
transition: opacity 200ms;
|
|
505
|
+
margin: 3.5px;
|
|
506
|
+
}
|
|
507
|
+
.sm-emoji-item:hover {
|
|
508
|
+
opacity: 1;
|
|
509
|
+
}
|
|
510
|
+
</style>
|