@x33025/sveltely 0.1.2 → 0.1.4

package/dist/components/Library/Dropdown/Dropdown.demo.svelte

@@ -1,89 +1,199 @@
 <script module lang="ts">
 	export const demo = {
 		name: 'Dropdown',
-		description: 'Structured dropdown menu with grouped items and automatic close on selection.'
+		description: 'Composable dropdown menu with declarative items, sections, and actions.',
+		columnSpan: 2
 	};
 </script>
 
 <script lang="ts">
-	import Dropdown from './Dropdown.svelte';
-	import type { DropdownEntry } from './types';
+	import { CheckIcon, ChevronDownIcon, PlusIcon, UserRoundXIcon } from '@lucide/svelte';
+	import SearchField from '../SearchField';
+	import ScrollView, { type ScrollGeometry } from '../ScrollView';
+	import Dropdown from './index';
 
-	const allItems: DropdownEntry<string>[] = [
-		{
-			type: 'group' as const,
-			label: 'Publishing',
-			items: [
-				{ label: 'Draft', value: 'draft' },
-				{ label: 'Scheduled', value: 'scheduled' },
-				{ type: 'divider' },
-				{
-					type: 'submenu' as const,
-					label: 'Advanced',
-					items: [
-						{ label: 'Review queue', value: 'review' },
-						{ type: 'divider' },
-						{
-							type: 'action' as const,
-							label: 'Open workflow',
-							onSelect: () => {
-								console.log('Open workflow');
-							}
-						}
-					]
-				},
-				{
-					type: 'action' as const,
-					label: 'Create new status',
-					onSelect: () => {
-						console.log('Create new status');
-					}
-				}
-			]
-		},
-		{
-			type: 'group' as const,
-			label: 'Visibility',
-			items: [
-				{ label: 'Public', value: 'public' },
-				{ label: 'Private', value: 'private', disabled: true }
-			]
-		}
-	];
+	type Website = {
+		id: string;
+		name: string;
+		domain: string | null;
+	};
 
-	const filterEntries = (entries: DropdownEntry<string>[], query: string): DropdownEntry<string>[] => {
-		const normalizedQuery = query.trim().toLowerCase();
-		if (!normalizedQuery) return allItems;
+	const statusLabels: Record<string, string> = {
+		draft: 'Draft',
+		scheduled: 'Scheduled',
+		public: 'Public',
+		private: 'Private'
+	};
 
-		return entries.flatMap<DropdownEntry<string>>((entry) => {
-			if (entry.type === 'divider') {
-				return [];
-			}
+	const websites: Website[] = [
+		{ id: 'sveltely', name: 'Sveltely', domain: 'sveltely.dev' },
+		{ id: 'northstar', name: 'Northstar Studio', domain: 'northstar.example' },
+		{ id: 'atlas', name: 'Atlas Analytics', domain: 'atlas.example' },
+		{ id: 'folio', name: 'Folio', domain: null },
+		{ id: 'harbor', name: 'Harbor CMS', domain: 'harbor.example' },
+		{ id: 'beam', name: 'Beam Commerce', domain: 'beam.example' },
+		{ id: 'signal', name: 'Signal CRM', domain: 'signal.example' },
+		{ id: 'lumen', name: 'Lumen Health', domain: 'lumen.example' },
+		{ id: 'orbit', name: 'Orbit Travel', domain: 'orbit.example' },
+		{ id: 'canvas', name: 'Canvas Studio', domain: 'canvas.example' },
+		{ id: 'ledger', name: 'Ledger Works', domain: 'ledger.example' },
+		{ id: 'summit', name: 'Summit Labs', domain: 'summit.example' },
+		{ id: 'keystone', name: 'Keystone Legal', domain: 'keystone.example' },
+		{ id: 'prairie', name: 'Prairie Supply', domain: 'prairie.example' },
+		{ id: 'fieldnote', name: 'Fieldnote', domain: null },
+		{ id: 'vertex', name: 'Vertex Systems', domain: 'vertex.example' }
+	];
 
-			if (entry.type === 'group') {
-				const nextItems = filterEntries(entry.items, normalizedQuery);
-				return nextItems.length > 0 ? [{ ...entry, items: nextItems }] : [];
-			}
+	let status = $state<string | null>('draft');
+	let selectedWebsiteId = $state<string | null>('sveltely');
+	let websiteQuery = $state('');
+	let visibleWebsiteCount = $state(6);
+	let actionCount = $state(0);
+	let lastWebsiteQuery = '';
+	const websiteBatchSize = 4;
 
-			if (entry.type === 'submenu') {
-				const nextItems = filterEntries(entry.items, normalizedQuery);
-				const matches = entry.label.toLowerCase().includes(normalizedQuery);
-				if (!matches && nextItems.length === 0) {
-					return [];
-				}
-				return [{ ...entry, items: matches ? entry.items : nextItems }];
-			}
+	const selectedStatusLabel = $derived(status ? statusLabels[status] : null);
+	const selectedWebsite = $derived(
+		websites.find((website) => website.id === selectedWebsiteId) ?? null
+	);
+	const filteredWebsites = $derived.by(() => {
+		const query = websiteQuery.trim().toLowerCase();
+		if (!query) return websites;
+		return websites.filter((website) =>
+			[website.name, website.domain ?? ''].some((value) => value.toLowerCase().includes(query))
+		);
+	});
+	const visibleWebsites = $derived(filteredWebsites.slice(0, visibleWebsiteCount));
 
-			return entry.label.toLowerCase().includes(normalizedQuery) ? [entry] : [];
-		});
-	};
+	function createWebsite() {
+		actionCount += 1;
+	}
 
-	let items = $state(allItems);
-	let value = $state<string | null>('draft');
+	function loadMoreWebsites() {
+		visibleWebsiteCount = Math.min(filteredWebsites.length, visibleWebsiteCount + websiteBatchSize);
+	}
 
-	const handleSearch = async (query: string) => {
-		items = filterEntries(allItems, query);
-	};
+	function handleWebsiteScroll(geometry: ScrollGeometry) {
+		if (visibleWebsiteCount >= filteredWebsites.length) return;
+		if (geometry.progress.y < 0.8) return;
+		loadMoreWebsites();
+	}
+
+	$effect(() => {
+		const nextQuery = websiteQuery.trim().toLowerCase();
+		if (nextQuery === lastWebsiteQuery) return;
+		lastWebsiteQuery = nextQuery;
+		visibleWebsiteCount = 6;
+	});
 </script>
 
-<Dropdown {items} bind:value placeholder="Choose status" onSearch={handleSearch} />
+<div class="grid w-full gap-4 md:grid-cols-2">
+	<div class="vstack gap-2">
+		<p class="text-sm font-medium text-[var(--sveltely-primary-color)]">Default trigger</p>
+		<Dropdown bind:value={status} placeholder="Choose status" selectedLabel={selectedStatusLabel}>
+			<Dropdown.Section label="Publishing">
+				<Dropdown.Item value="draft">Draft</Dropdown.Item>
+				<Dropdown.Item value="scheduled">Scheduled</Dropdown.Item>
+				<Dropdown.Divider />
+				<Dropdown.Action onclick={() => (actionCount += 1)}>Open workflow</Dropdown.Action>
+				<Dropdown.Action onclick={() => (actionCount += 1)}>Create new status</Dropdown.Action>
+			</Dropdown.Section>
+			<Dropdown.Section label="Visibility">
+				<Dropdown.Item value="public">Public</Dropdown.Item>
+				<Dropdown.Item value="private" disabled>Private</Dropdown.Item>
+			</Dropdown.Section>
+		</Dropdown>
+		<p class="text-xs text-[var(--sveltely-secondary-color)]">
+			Selected: {selectedStatusLabel ?? 'none'}
+		</p>
+	</div>
+
+	<div class="vstack gap-2">
+		<p class="text-sm font-medium text-[var(--sveltely-primary-color)]">
+			Custom trigger and rich rows
+		</p>
+		<Dropdown
+			bind:value={selectedWebsiteId}
+			selectedLabel={selectedWebsite?.name ?? null}
+			showCheck={false}
+		>
+			{#snippet trigger(dropdown)}
+				<button
+					use:dropdown.useTrigger
+					type="button"
+					class="hstack w-full items-center gap-2 rounded-full border px-3 py-2 pr-2 text-left text-sm"
+					style="border-color: var(--sveltely-border-color); background: var(--sveltely-background-color);"
+					aria-expanded={dropdown.open}
+					aria-haspopup="dialog"
+					onclick={dropdown.toggle}
+				>
+					{#if selectedWebsite}
+						<span class="min-w-0 flex-1 truncate text-[var(--sveltely-primary-color)]"
+							>{selectedWebsite.name}</span
+						>
+						{#if selectedWebsite.domain}
+							<span class="max-w-32 truncate text-xs text-[var(--sveltely-secondary-color)]"
+								>{selectedWebsite.domain}</span
+							>
+						{/if}
+					{:else}
+						<span class="min-w-0 flex-1 text-[var(--sveltely-secondary-color)]">Select website</span
+						>
+					{/if}
+					<ChevronDownIcon size={14} class="shrink-0 text-[var(--sveltely-secondary-color)]" />
+				</button>
+			{/snippet}
+
+			<SearchField bind:value={websiteQuery} placeholder="Search websites..." />
+			<Dropdown.Action onclick={createWebsite}>
+				<PlusIcon size={14} />
+				<span>Create website</span>
+			</Dropdown.Action>
+			<Dropdown.Divider />
+			<Dropdown.Item value={null}>
+				<UserRoundXIcon size={14} />
+				<span>No website</span>
+			</Dropdown.Item>
+			<Dropdown.Section label="Websites">
+				{#if filteredWebsites.length === 0}
+					<div class="px-2 py-1 text-sm text-[var(--sveltely-secondary-color)]">
+						No websites found.
+					</div>
+				{:else}
+					<div class="h-36">
+						<ScrollView
+							contentStyles={{ paddingX: 0, paddingY: 0 }}
+							borderRadius="var(--sveltely-border-radius-nested)"
+							background="white"
+							onScroll={handleWebsiteScroll}
+						>
+							<div class="vstack gap-1">
+								{#each visibleWebsites as website (website.id)}
+									<Dropdown.Item value={website.id}>
+										{#snippet children({ selected })}
+											<div class="vstack min-w-0 gap-0.5">
+												<span class="truncate">{website.name}</span>
+												{#if website.domain}
+													<span class="truncate text-xs text-[var(--sveltely-secondary-color)]"
+														>{website.domain}</span
+													>
+												{/if}
+											</div>
+											{#if selected}
+												<CheckIcon
+													size={14}
+													class="shrink-0 text-[var(--sveltely-primary-color)]"
+												/>
+											{/if}
+										{/snippet}
+									</Dropdown.Item>
+								{/each}
+							</div>
+						</ScrollView>
+					</div>
+				{/if}
+			</Dropdown.Section>
+		</Dropdown>
+		<p class="text-xs text-[var(--sveltely-secondary-color)]">Actions clicked: {actionCount}</p>
+	</div>
+</div>

package/dist/components/Library/Dropdown/Dropdown.demo.svelte.d.ts

@@ -1,8 +1,9 @@
 export declare const demo: {
     name: string;
     description: string;
+    columnSpan: number;
 };
-import Dropdown from './Dropdown.svelte';
+import Dropdown from './index';
 declare const Dropdown: import("svelte").Component<Record<string, never>, {}, "">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;