@foxui/social 0.4.7 → 0.4.8
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/components/animated-emoji-picker/EmojiPicker.svelte +120 -0
- package/dist/components/animated-emoji-picker/EmojiPicker.svelte.d.ts +11 -0
- package/dist/components/animated-emoji-picker/PopoverEmojiPicker.svelte +24 -0
- package/dist/components/animated-emoji-picker/PopoverEmojiPicker.svelte.d.ts +11 -0
- package/dist/components/animated-emoji-picker/emoji.d.ts +7 -0
- package/dist/components/animated-emoji-picker/emoji.js +56 -0
- package/dist/components/animated-emoji-picker/icons.json +10259 -0
- package/dist/components/animated-emoji-picker/index.d.ts +2 -0
- package/dist/components/animated-emoji-picker/index.js +2 -0
- package/dist/components/{bluesky-login/BlueskyLogin.svelte → atproto-login/AtprotoLogin.svelte} +4 -4
- package/dist/components/atproto-login/AtprotoLogin.svelte.d.ts +4 -0
- package/dist/components/atproto-login/AtprotoLoginModal.svelte +129 -0
- package/dist/components/atproto-login/AtprotoLoginModal.svelte.d.ts +9 -0
- package/dist/components/atproto-login/index.d.ts +9 -0
- package/dist/components/atproto-login/index.js +3 -0
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.js +2 -1
- package/package.json +31 -31
- package/dist/components/bluesky-login/BlueskyLogin.svelte.d.ts +0 -4
- package/dist/components/bluesky-login/BlueskyLoginModal.svelte +0 -141
- package/dist/components/bluesky-login/BlueskyLoginModal.svelte.d.ts +0 -9
- package/dist/components/bluesky-login/index.d.ts +0 -8
- package/dist/components/bluesky-login/index.js +0 -3
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn, ScrollArea } from '@foxui/core';
|
|
3
|
+
import { allGroups } from './emoji';
|
|
4
|
+
import type { NativeEmoji } from 'emoji-picker-element/shared';
|
|
5
|
+
import { fade } from 'svelte/transition';
|
|
6
|
+
import { onMount } from 'svelte';
|
|
7
|
+
import icons from './icons.json';
|
|
8
|
+
|
|
9
|
+
const categories = [...new Set(icons.icons.flatMap((i) => i.categories ?? []))].sort();
|
|
10
|
+
|
|
11
|
+
console.log(categories);
|
|
12
|
+
let currentGroup = $state(allGroups[0]);
|
|
13
|
+
|
|
14
|
+
let {
|
|
15
|
+
onpicked,
|
|
16
|
+
height = 300,
|
|
17
|
+
width = 344,
|
|
18
|
+
columns = 5,
|
|
19
|
+
class: className
|
|
20
|
+
}: {
|
|
21
|
+
onpicked?: (emoji: NativeEmoji) => void;
|
|
22
|
+
height?: number;
|
|
23
|
+
width?: number;
|
|
24
|
+
columns?: number;
|
|
25
|
+
class?: string;
|
|
26
|
+
} = $props();
|
|
27
|
+
|
|
28
|
+
onMount(() => {});
|
|
29
|
+
|
|
30
|
+
let currentEmojis = $derived(
|
|
31
|
+
icons.icons.filter((value) => value.categories.includes(currentGroup.name))
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
function switchEmoji(event: Event, emoji, back: boolean) {
|
|
35
|
+
if (!back)
|
|
36
|
+
event.target.src = `https://fonts.gstatic.com/s/e/notoemoji/latest/${emoji.codepoint}/512.webp`;
|
|
37
|
+
else
|
|
38
|
+
event.target.src = `https://fonts.gstatic.com/s/e/notoemoji/latest/${emoji.codepoint}/emoji.svg`;
|
|
39
|
+
|
|
40
|
+
console.log('hello', back);
|
|
41
|
+
}
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<div class={cn('flex flex-col', className)} style="height: {height}px; width: {width}px;">
|
|
45
|
+
<ScrollArea
|
|
46
|
+
class="grid w-full select-none space-y-4 px-2"
|
|
47
|
+
style="height: {height}px; grid-template-columns: repeat({columns}, minmax(0, 1fr));"
|
|
48
|
+
>
|
|
49
|
+
<!-- {#await emojiDatabase.db?.getEmojiByGroup(currentGroup) then emojis}
|
|
50
|
+
{#if emojis}
|
|
51
|
+
{#each emojis as emoji}
|
|
52
|
+
{#if isEmojiSupported(emoji.unicode)}
|
|
53
|
+
<button
|
|
54
|
+
onclick={() => {
|
|
55
|
+
onpicked?.(emoji);
|
|
56
|
+
}}
|
|
57
|
+
class="hover:bg-accent-300/20 dark:hover:bg-accent-700/20 size-10 cursor-pointer rounded-full text-center text-xl transition-transform duration-150 hover:scale-110"
|
|
58
|
+
>{emoji.unicode}</button
|
|
59
|
+
>
|
|
60
|
+
{/if}
|
|
61
|
+
{/each}
|
|
62
|
+
{/if}
|
|
63
|
+
{/await} -->
|
|
64
|
+
|
|
65
|
+
{#key currentGroup}
|
|
66
|
+
{#each currentEmojis as emoji}
|
|
67
|
+
<button
|
|
68
|
+
onclick={() => {
|
|
69
|
+
onpicked?.(emoji);
|
|
70
|
+
}}
|
|
71
|
+
class="group/emoji hover:bg-accent-300/20 dark:hover:bg-accent-700/20 inline-flex size-10 cursor-pointer items-center justify-center rounded-full text-center text-xl transition-transform duration-150 hover:scale-110"
|
|
72
|
+
>
|
|
73
|
+
<img
|
|
74
|
+
class="size-8"
|
|
75
|
+
src="https://fonts.gstatic.com/s/e/notoemoji/latest/{emoji.codepoint}/emoji.svg"
|
|
76
|
+
alt=""
|
|
77
|
+
onpointerenter={(event) => {
|
|
78
|
+
switchEmoji(event, emoji, false);
|
|
79
|
+
}}
|
|
80
|
+
onpointerleave={(event) => {
|
|
81
|
+
switchEmoji(event, emoji, true);
|
|
82
|
+
}}
|
|
83
|
+
/>
|
|
84
|
+
<!-- <img
|
|
85
|
+
class="hidden size-8 group-hover/emoji:block"
|
|
86
|
+
src="https://fonts.gstatic.com/s/e/notoemoji/latest/{emoji.codepoint}/512.webp"
|
|
87
|
+
loading="lazy"
|
|
88
|
+
alt=""
|
|
89
|
+
/> -->
|
|
90
|
+
</button>
|
|
91
|
+
{/each}
|
|
92
|
+
{/key}
|
|
93
|
+
</ScrollArea>
|
|
94
|
+
<div
|
|
95
|
+
class="border-base-300/50 dark:border-base-700/50 flex justify-between gap-2 border-t px-3"
|
|
96
|
+
style="width: {width}px;"
|
|
97
|
+
>
|
|
98
|
+
{#each allGroups as group}
|
|
99
|
+
<button
|
|
100
|
+
onclick={() => (currentGroup = group)}
|
|
101
|
+
class={cn(
|
|
102
|
+
'[&>svg]:size-4.5 relative cursor-pointer py-2 [&>svg]:transition-all [&>svg]:duration-100 [&>svg]:hover:scale-105',
|
|
103
|
+
group.id == currentGroup.id
|
|
104
|
+
? 'text-accent-600 dark:text-accent-400'
|
|
105
|
+
: 'hover:text-accent-700 dark:hover:text-accent-300'
|
|
106
|
+
)}
|
|
107
|
+
>
|
|
108
|
+
{@html group.svg}
|
|
109
|
+
<span class="sr-only">{group.name}</span>
|
|
110
|
+
|
|
111
|
+
{#if group.id == currentGroup.id}
|
|
112
|
+
<span
|
|
113
|
+
transition:fade
|
|
114
|
+
class="from-accent-500/0 via-accent-500/60 to-accent-500/0 dark:from-accent-400/0 dark:via-accent-400/60 dark:to-accent-400/0 absolute -inset-x-1 -top-px h-px bg-gradient-to-r"
|
|
115
|
+
></span>
|
|
116
|
+
{/if}
|
|
117
|
+
</button>
|
|
118
|
+
{/each}
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { NativeEmoji } from 'emoji-picker-element/shared';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
onpicked?: (emoji: NativeEmoji) => void;
|
|
4
|
+
height?: number;
|
|
5
|
+
width?: number;
|
|
6
|
+
columns?: number;
|
|
7
|
+
class?: string;
|
|
8
|
+
};
|
|
9
|
+
declare const EmojiPicker: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
10
|
+
type EmojiPicker = ReturnType<typeof EmojiPicker>;
|
|
11
|
+
export default EmojiPicker;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Popover, type PopoverProps, cn } from '@foxui/core';
|
|
3
|
+
import EmojiPicker from './EmojiPicker.svelte';
|
|
4
|
+
import type { NativeEmoji } from './emoji';
|
|
5
|
+
import type { Snippet } from 'svelte';
|
|
6
|
+
|
|
7
|
+
let {
|
|
8
|
+
onpicked,
|
|
9
|
+
children,
|
|
10
|
+
class: className,
|
|
11
|
+
open = $bindable(false),
|
|
12
|
+
triggerRef = $bindable(null),
|
|
13
|
+
...props
|
|
14
|
+
}: {
|
|
15
|
+
onpicked?: (emoji: NativeEmoji) => void;
|
|
16
|
+
children?: Snippet;
|
|
17
|
+
class?: string;
|
|
18
|
+
} & PopoverProps = $props();
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<Popover {...props} bind:triggerRef bind:open class={cn('p-0', className)}>
|
|
22
|
+
{@render children?.()}
|
|
23
|
+
<EmojiPicker {onpicked} />
|
|
24
|
+
</Popover>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type PopoverProps } from '@foxui/core';
|
|
2
|
+
import type { NativeEmoji } from './emoji';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
type $$ComponentProps = {
|
|
5
|
+
onpicked?: (emoji: NativeEmoji) => void;
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
class?: string;
|
|
8
|
+
} & PopoverProps;
|
|
9
|
+
declare const PopoverEmojiPicker: import("svelte").Component<$$ComponentProps, {}, "open" | "triggerRef">;
|
|
10
|
+
type PopoverEmojiPicker = ReturnType<typeof PopoverEmojiPicker>;
|
|
11
|
+
export default PopoverEmojiPicker;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
export const allGroups = [
|
|
2
|
+
[
|
|
3
|
+
0,
|
|
4
|
+
'😀',
|
|
5
|
+
'Smileys and emotions',
|
|
6
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>`
|
|
7
|
+
],
|
|
8
|
+
[
|
|
9
|
+
1,
|
|
10
|
+
'👋',
|
|
11
|
+
'People',
|
|
12
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hand-icon lucide-hand"><path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg>`
|
|
13
|
+
],
|
|
14
|
+
[
|
|
15
|
+
3,
|
|
16
|
+
'🐱',
|
|
17
|
+
'Animals and nature',
|
|
18
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-dog-icon lucide-dog"><path d="M11.25 16.25h1.5L12 17z"/><path d="M16 14v.5"/><path d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309"/><path d="M8 14v.5"/><path d="M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5"/></svg>`
|
|
19
|
+
],
|
|
20
|
+
[
|
|
21
|
+
4,
|
|
22
|
+
'🍎',
|
|
23
|
+
'Food and drink',
|
|
24
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-apple-icon lucide-apple"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/></svg> `
|
|
25
|
+
],
|
|
26
|
+
[
|
|
27
|
+
5,
|
|
28
|
+
'🏠️',
|
|
29
|
+
'Travel and places',
|
|
30
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>`
|
|
31
|
+
],
|
|
32
|
+
[
|
|
33
|
+
6,
|
|
34
|
+
'⚽',
|
|
35
|
+
'Activities and events',
|
|
36
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-volleyball-icon lucide-volleyball"><path d="M11.1 7.1a16.55 16.55 0 0 1 10.9 4"/><path d="M12 12a12.6 12.6 0 0 1-8.7 5"/><path d="M16.8 13.6a16.55 16.55 0 0 1-9 7.5"/><path d="M20.7 17a12.8 12.8 0 0 0-8.7-5 13.3 13.3 0 0 1 0-10"/><path d="M6.3 3.8a16.55 16.55 0 0 0 1.9 11.5"/><circle cx="12" cy="12" r="10"/></svg>`
|
|
37
|
+
],
|
|
38
|
+
[
|
|
39
|
+
7,
|
|
40
|
+
'📝',
|
|
41
|
+
'Objects',
|
|
42
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb-icon lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>`
|
|
43
|
+
],
|
|
44
|
+
[
|
|
45
|
+
8,
|
|
46
|
+
'⛔️',
|
|
47
|
+
'Symbols',
|
|
48
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pi-icon lucide-square-pi"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7h10"/><path d="M10 7v10"/><path d="M16 17a2 2 0 0 1-2-2V7"/></svg>`
|
|
49
|
+
],
|
|
50
|
+
[
|
|
51
|
+
9,
|
|
52
|
+
'🏁',
|
|
53
|
+
'Flags',
|
|
54
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flag-icon lucide-flag"><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"/><line x1="4" x2="4" y1="22" y2="15"/></svg>`
|
|
55
|
+
]
|
|
56
|
+
].map(([id, emoji, name, svg]) => ({ id, emoji, name, svg }));
|