chore(FontVirtualList): transform FontList into reusable FontVirtualList component with appliedFontsManager support
This commit is contained in:
@@ -1,32 +0,0 @@
|
|||||||
<!--
|
|
||||||
Component: FontList
|
|
||||||
|
|
||||||
- Displays a virtualized list of fonts with loading, empty, and error states.
|
|
||||||
- Uses unifiedFontStore from context for data, but can accept explicit fonts via props.
|
|
||||||
-->
|
|
||||||
<script lang="ts">
|
|
||||||
import FontView from '$features/ShowFont/ui/FontView.svelte';
|
|
||||||
import {
|
|
||||||
Content as ItemContent,
|
|
||||||
Root as ItemRoot,
|
|
||||||
Title as ItemTitle,
|
|
||||||
} from '$shared/shadcn/ui/item';
|
|
||||||
import { VirtualList } from '$shared/ui';
|
|
||||||
import { fontshareStore } from '../../model';
|
|
||||||
|
|
||||||
$inspect(fontshareStore.fonts);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<VirtualList items={fontshareStore.fonts}>
|
|
||||||
{#snippet children({ item: font })}
|
|
||||||
<ItemRoot>
|
|
||||||
<ItemContent>
|
|
||||||
<!-- <ItemTitle></ItemTitle> -->
|
|
||||||
<span class="text-xs text-muted-foreground">
|
|
||||||
{font.provider} • {font.category}
|
|
||||||
</span>
|
|
||||||
<FontView id={font.id} slug={font.id} name={font.name}>{font.name}</FontView>
|
|
||||||
</ItemContent>
|
|
||||||
</ItemRoot>
|
|
||||||
{/snippet}
|
|
||||||
</VirtualList>
|
|
||||||
30
src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
Normal file
30
src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<script lang="ts" generics="T extends { id: string }">
|
||||||
|
import { VirtualList } from '$shared/ui';
|
||||||
|
import type { ComponentProps } from 'svelte';
|
||||||
|
import { appliedFontsManager } from '../../model/store/appliedFontsStore/appliedFontsStore.svelte';
|
||||||
|
|
||||||
|
interface Props extends Omit<ComponentProps<typeof VirtualList<T>>, 'onVisibleItemsChange'> {
|
||||||
|
onVisibleItemsChange?: (items: T[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { items, children, onVisibleItemsChange, ...rest }: Props = $props();
|
||||||
|
|
||||||
|
function handleInternalVisibleChange(visibleItems: T[]) {
|
||||||
|
// Auto-register fonts with the manager
|
||||||
|
const slugs = visibleItems.map(item => item.id);
|
||||||
|
appliedFontsManager.registerFonts(slugs);
|
||||||
|
|
||||||
|
// Forward the call to any external listener
|
||||||
|
onVisibleItemsChange?.(visibleItems);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<VirtualList
|
||||||
|
{items}
|
||||||
|
{...rest}
|
||||||
|
onVisibleItemsChange={handleInternalVisibleChange}
|
||||||
|
>
|
||||||
|
{#snippet children(scope)}
|
||||||
|
{@render children(scope)}
|
||||||
|
{/snippet}
|
||||||
|
</VirtualList>
|
||||||
Reference in New Issue
Block a user