+6

.changeset/gold-stars-talk.md

Reviewed

··· 1 1 + --- 2 2 + '@foxui/social': patch 3 3 + '@foxui/core': patch 4 4 + --- 5 5 + 6 6 + hopefully improve emojipicker, improve box

+1 -1

packages/core/src/lib/components/box/Box.svelte

Reviewed

··· 14 14 <div 15 15 bind:this={ref} 16 16 class={cn( 17 17 - 'border-base-300/50 bg-base-300/20 backdrop-blur-2xl dark:border-base-800/50 dark:bg-base-900/30 text-base-900 dark:text-base-100 relative isolate w-full overflow-hidden rounded-2xl border p-4', 17 17 + 'border-base-300/50 bg-base-50/70 backdrop-blur-2xl dark:border-base-800/50 dark:bg-base-900/60 text-base-900 dark:text-base-100 relative isolate w-full overflow-hidden rounded-2xl border p-4', 18 18 className 19 19 )} 20 20 {...restProps}

+38 -22

packages/social/src/lib/components/emoji-picker/EmojiPicker.svelte

Reviewed

··· 1 1 + <script lang="ts" module> 2 2 + import { isEmojiSupported } from 'is-emoji-supported'; 3 3 + 4 4 + import Database from 'emoji-picker-element/database'; 5 5 + 6 6 + export let emojiDatabase: { 7 7 + db: Database | undefined; 8 8 + } = $state({ 9 9 + db: undefined 10 10 + }); 11 11 + 12 12 + export function loadEmojis() { 13 13 + if(emojiDatabase.db) return; 14 14 + 15 15 + import('emoji-picker-element').then(({ Database }) => { 16 16 + emojiDatabase.db = new Database(); 17 17 + 18 18 + // go through all groups and check if the emoji is supported (will be cached) 19 19 + // so that things appear faster when we select a group 20 20 + for (const group of allGroups) { 21 21 + emojiDatabase.db.getEmojiByGroup(group.id).then((emojis) => { 22 22 + for (const emoji of emojis) { 23 23 + isEmojiSupported(emoji.unicode); 24 24 + } 25 25 + }); 26 26 + } 27 27 + }); 28 28 + console.log('emojis loaded'); 29 29 + } 30 30 + </script> 31 31 + 1 32 <script lang="ts"> 2 33 import { cn, ScrollArea } from '@foxui/core'; 3 3 - import { isEmojiSupported } from 'is-emoji-supported'; 4 34 import { allGroups } from './emoji'; 5 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 37 + import { onMount } from 'svelte'; 8 38 9 39 let currentGroup = $state(allGroups[0].id); 10 10 - let db: Database | undefined = $state(); 11 40 12 41 let { 13 42 onpicked, ··· 23 52 class?: string; 24 53 } = $props(); 25 54 26 26 - $effect(() => { 27 27 - if (db) return; 28 28 - import('emoji-picker-element').then(({ Database }) => { 29 29 - db = new Database(); 30 30 - 31 31 - // go through all groups and check if the emoji is supported (will be cached) 32 32 - // so that things appear faster when we select a group 33 33 - for (const group of allGroups) { 34 34 - db.getEmojiByGroup(group.id).then((emojis) => { 35 35 - for (const emoji of emojis) { 36 36 - isEmojiSupported(emoji.unicode); 37 37 - } 38 38 - }); 39 39 - } 40 40 - }); 41 41 - }); 55 55 + onMount(() => { 56 56 + loadEmojis(); 57 57 + }) 42 58 </script> 43 59 44 60 <div class={cn('flex flex-col', className)} style="height: {height}px; width: {width}px;"> ··· 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 49 - {#await db?.getEmojiByGroup(currentGroup) then emojis} 65 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 86 <button 71 87 onclick={() => (currentGroup = group.id)} 72 88 class={cn( 73 73 - '[&>svg]:size-4.5 relative cursor-pointer [&>svg]:transition-all [&>svg]:duration-100 [&>svg]:hover:scale-105 py-2', 89 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 78 - > 94 94 + > 79 95 {@html group.svg} 80 96 <span class="sr-only">{group.name}</span> 81 97

+2

packages/social/src/lib/components/emoji-picker/index.ts

Reviewed

··· 1 1 export { default as EmojiPicker } from './EmojiPicker.svelte'; 2 2 export { default as PopoverEmojiPicker } from './PopoverEmojiPicker.svelte'; 3 3 + 4 4 + export { loadEmojis } from './EmojiPicker.svelte';

+1 -1

apps/docs/src/routes/(main)/components/3d/model-picker/ModelPicker.md

Reviewed

··· 2 2 import Example from './Example.svelte'; 3 3 </script> 4 4 5 5 - # Depth 3D 5 5 + # Model Picker 6 6 7 7 ## Example 8 8

+1 -1

apps/docs/src/routes/(main)/components/3d/voxel-art/VoxelArt.md

Reviewed

··· 2 2 import Example from './Example.svelte'; 3 3 </script> 4 4 5 5 - # Depth 3D 5 5 + # Voxel Art 6 6 7 7 ## Example 8 8

+4 -3

apps/docs/src/routes/(main)/components/core/scroll-area/Example.svelte

Reviewed

··· 1 1 <script> 2 2 - import { ScrollArea } from '@foxui/all'; 2 2 + import { ScrollArea, Box } from '@foxui/all'; 3 3 4 4 let content = `Doggo ipsum puggorino shoob I am bekom fat. Clouds such treat big ol pupper vvv, porgo. Aqua 5 5 doggo ur givin me a spook corgo heckin good boys heck much ruin diet, ur givin me a spook doggo ··· 32 32 diet very jealous pupper, floofs shibe he made many woofs woofer, heckin good boys pupperino.`; 33 33 </script> 34 34 35 35 - <ScrollArea 36 36 - class="border-base-200 dark:border-base-800 text-base-900 dark:text-base-100 bg-base-100 dark:bg-base-900 h-52 w-96 max-w-full rounded-2xl border p-3" 35 35 + <Box class="p-0 w-128 max-w-full"> 36 36 + <ScrollArea class="h-52 px-4 py-2" 37 37 > 38 38 {content} 39 39 </ScrollArea> 40 40 + </Box>

+3 -6

apps/docs/src/routes/(main)/components/social/emoji-picker/EmojiPicker.md

Reviewed

··· 15 15 import { EmojiPicker } from '@foxui/social'; 16 16 </script> 17 17 18 18 - <EmojiPicker 19 19 - onpicked={(emoji) => console.log('selected emoji: ' + emoji.unicode)} /> 18 18 + <EmojiPicker onpicked={(emoji) => console.log('selected emoji: ' + emoji.unicode)} /> 20 19 21 21 - // or popover emoji picker 20 20 + <!-- or popover emoji picker --> 22 21 23 22 <PopoverEmojiPicker onpicked={(emoji) => console.log('selected emoji: ' + emoji.unicode)}> 24 23 {#snippet child({ props })} 25 25 - <Button size="iconLg" {...props}> 26 26 - Open Emoji Picker 27 27 - </Button> 24 24 + <Button size="iconLg" {...props}>Open Emoji Picker</Button> 28 25 {/snippet} 29 26 </PopoverEmojiPicker> 30 27 ```

-2

apps/docs/src/routes/(main)/components/social/link-card/LinkCard.md

Reviewed

··· 18 18 <LinkCard 19 19 meta={{ 20 20 title: "hi, i'm florian", 21 21 - description: 22 22 - "hello world! this is my personal website. i'm florian, a full-stack software engineer based in berlin.", 23 21 image: 'https://flo-bit.dev/og.jpg' 24 22 }} 25 23 href="https://www.flo-bit.dev"