@foxui/social 0.4.5 → 0.4.7
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.
|
@@ -1,13 +1,42 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import { isEmojiSupported } from 'is-emoji-supported';
|
|
3
|
+
|
|
4
|
+
import Database from 'emoji-picker-element/database';
|
|
5
|
+
|
|
6
|
+
export let emojiDatabase: {
|
|
7
|
+
db: Database | undefined;
|
|
8
|
+
} = $state({
|
|
9
|
+
db: undefined
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
export function loadEmojis() {
|
|
13
|
+
if(emojiDatabase.db) return;
|
|
14
|
+
|
|
15
|
+
import('emoji-picker-element').then(({ Database }) => {
|
|
16
|
+
emojiDatabase.db = new Database();
|
|
17
|
+
|
|
18
|
+
// go through all groups and check if the emoji is supported (will be cached)
|
|
19
|
+
// so that things appear faster when we select a group
|
|
20
|
+
for (const group of allGroups) {
|
|
21
|
+
emojiDatabase.db.getEmojiByGroup(group.id).then((emojis) => {
|
|
22
|
+
for (const emoji of emojis) {
|
|
23
|
+
isEmojiSupported(emoji.unicode);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
console.log('emojis loaded');
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
|
|
1
32
|
<script lang="ts">
|
|
2
33
|
import { cn, ScrollArea } from '@foxui/core';
|
|
3
|
-
import { isEmojiSupported } from 'is-emoji-supported';
|
|
4
34
|
import { allGroups } from './emoji';
|
|
5
|
-
import Database from 'emoji-picker-element/database';
|
|
6
35
|
import type { NativeEmoji } from 'emoji-picker-element/shared';
|
|
7
36
|
import { fade } from 'svelte/transition';
|
|
37
|
+
import { onMount } from 'svelte';
|
|
8
38
|
|
|
9
39
|
let currentGroup = $state(allGroups[0].id);
|
|
10
|
-
let db: Database | undefined = $state();
|
|
11
40
|
|
|
12
41
|
let {
|
|
13
42
|
onpicked,
|
|
@@ -23,22 +52,9 @@
|
|
|
23
52
|
class?: string;
|
|
24
53
|
} = $props();
|
|
25
54
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
db = new Database();
|
|
30
|
-
|
|
31
|
-
// go through all groups and check if the emoji is supported (will be cached)
|
|
32
|
-
// so that things appear faster when we select a group
|
|
33
|
-
for (const group of allGroups) {
|
|
34
|
-
db.getEmojiByGroup(group.id).then((emojis) => {
|
|
35
|
-
for (const emoji of emojis) {
|
|
36
|
-
isEmojiSupported(emoji.unicode);
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
});
|
|
55
|
+
onMount(() => {
|
|
56
|
+
loadEmojis();
|
|
57
|
+
})
|
|
42
58
|
</script>
|
|
43
59
|
|
|
44
60
|
<div class={cn('flex flex-col', className)} style="height: {height}px; width: {width}px;">
|
|
@@ -46,7 +62,7 @@
|
|
|
46
62
|
class="grid w-full select-none space-y-0 px-2"
|
|
47
63
|
style="height: {height}px; grid-template-columns: repeat({columns}, minmax(0, 1fr));"
|
|
48
64
|
>
|
|
49
|
-
{#await db?.getEmojiByGroup(currentGroup) then emojis}
|
|
65
|
+
{#await emojiDatabase.db?.getEmojiByGroup(currentGroup) then emojis}
|
|
50
66
|
{#if emojis}
|
|
51
67
|
{#each emojis as emoji}
|
|
52
68
|
{#if isEmojiSupported(emoji.unicode)}
|
|
@@ -70,12 +86,12 @@
|
|
|
70
86
|
<button
|
|
71
87
|
onclick={() => (currentGroup = group.id)}
|
|
72
88
|
class={cn(
|
|
73
|
-
'[&>svg]:size-4.5 relative cursor-pointer [&>svg]:transition-all [&>svg]:duration-100 [&>svg]:hover:scale-105
|
|
89
|
+
'[&>svg]:size-4.5 relative cursor-pointer py-2 [&>svg]:transition-all [&>svg]:duration-100 [&>svg]:hover:scale-105',
|
|
74
90
|
group.id === currentGroup
|
|
75
91
|
? 'text-accent-600 dark:text-accent-400'
|
|
76
92
|
: 'hover:text-accent-700 dark:hover:text-accent-300'
|
|
77
93
|
)}
|
|
78
|
-
|
|
94
|
+
>
|
|
79
95
|
{@html group.svg}
|
|
80
96
|
<span class="sr-only">{group.name}</span>
|
|
81
97
|
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import Database from 'emoji-picker-element/database';
|
|
2
|
+
export declare let emojiDatabase: {
|
|
3
|
+
db: Database | undefined;
|
|
4
|
+
};
|
|
5
|
+
export declare function loadEmojis(): void;
|
|
1
6
|
import type { NativeEmoji } from 'emoji-picker-element/shared';
|
|
2
7
|
type $$ComponentProps = {
|
|
3
8
|
onpicked?: (emoji: NativeEmoji) => void;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foxui/social",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.7",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"hls.js": "^1.6.2",
|
|
51
51
|
"is-emoji-supported": "^0.0.5",
|
|
52
52
|
"plyr": "^3.7.8",
|
|
53
|
-
"@foxui/core": "0.4.
|
|
54
|
-
"@foxui/time": "0.4.
|
|
53
|
+
"@foxui/core": "0.4.7",
|
|
54
|
+
"@foxui/time": "0.4.7"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"svelte": ">=5",
|