@x33025/sveltely 0.1.1 → 0.1.3

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getDropdownContext, type DropdownActionState } from './context';
+
+	type Props = {
+		disabled?: boolean;
+		closeOnSelect?: boolean;
+		children?: Snippet<[DropdownActionState]>;
+		onclick?: (event: MouseEvent) => void;
+	};
+
+	let { disabled = false, closeOnSelect, children, onclick }: Props = $props();
+
+	const dropdown = getDropdownContext();
+	const resolvedDisabled = $derived(dropdown.disabled || disabled);
+	const resolvedCloseOnSelect = $derived(closeOnSelect ?? dropdown.closeOnSelect);
+
+	function handleClick(event: MouseEvent) {
+		if (resolvedDisabled) return;
+		onclick?.(event);
+		if (!event.defaultPrevented && resolvedCloseOnSelect) dropdown.close();
+	}
+</script>
+
+<button
+	type="button"
+	class="dropdown-action inline-flex items-center text-left"
+	data-popover-radius-source
+	disabled={resolvedDisabled}
+	onclick={handleClick}
+>
+	{#if children}
+		{@render children({
+			disabled: resolvedDisabled,
+			close: dropdown.close
+		})}
+	{/if}
+</button>
+
+<style>
+	.dropdown-action {
+		width: 100%;
+		gap: calc(var(--sveltely-inset) * 2);
+		border-radius: var(--dropdown-item-radius, var(--sveltely-border-radius-nested));
+		padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+	}
+
+	.dropdown-action :global(*) {
+		border-radius: inherit;
+	}
+
+	.dropdown-action:hover {
+		background: var(--sveltely-hover-color);
+	}
+
+	.dropdown-action:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import { type DropdownActionState } from './context';
+type Props = {
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    children?: Snippet<[DropdownActionState]>;
+    onclick?: (event: MouseEvent) => void;
+};
+declare const Action: import("svelte").Component<Props, {}, "">;
+type Action = ReturnType<typeof Action>;
+export default Action;

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Divider from '../Divider';
+</script>
+
+<Divider />

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

@@ -0,0 +1,19 @@
+import Divider from '../Divider';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Divider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Divider = InstanceType<typeof Divider>;
+export default Divider;

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

@@ -1,82 +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 { CheckIcon, ChevronDownIcon, PlusIcon, UserRoundXIcon } from '@lucide/svelte';
+	import SearchField from '../SearchField';
+	import ScrollView, { type ScrollGeometry } from '../ScrollView';
+	import Dropdown from './index';
 
-	const allItems = [
-		{
-			type: 'group' as const,
-			label: 'Publishing',
-			items: [
-				{ label: 'Draft', value: 'draft' },
-				{ label: 'Scheduled', value: 'scheduled' },
-				{
-					type: 'submenu' as const,
-					label: 'Advanced',
-					items: [
-						{ label: 'Review queue', value: 'review' },
-						{
-							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 statusLabels: Record<string, string> = {
+		draft: 'Draft',
+		scheduled: 'Scheduled',
+		public: 'Public',
+		private: 'Private'
+	};
+
+	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' }
 	];
 
-	const filterEntries = (entries: typeof allItems, query: string): typeof allItems => {
-		const normalizedQuery = query.trim().toLowerCase();
-		if (!normalizedQuery) return allItems;
+	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;
 
-		return entries.flatMap((entry) => {
-			if (entry.type === 'group') {
-				const nextItems = filterEntries(entry.items, normalizedQuery);
-				return nextItems.length > 0 ? [{ ...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));
 
-			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 }];
-			}
+	function createWebsite() {
+		actionCount += 1;
+	}
 
-			return entry.label.toLowerCase().includes(normalizedQuery) ? [entry] : [];
-		});
-	};
+	function loadMoreWebsites() {
+		visibleWebsiteCount = Math.min(filteredWebsites.length, visibleWebsiteCount + websiteBatchSize);
+	}
 
-	let items = $state(allItems);
-	let value = $state<string | null>('draft');
+	function handleWebsiteScroll(geometry: ScrollGeometry) {
+		if (visibleWebsiteCount >= filteredWebsites.length) return;
+		if (geometry.progress.y < 0.8) return;
+		loadMoreWebsites();
+	}
 
-	const handleSearch = async (query: string) => {
-		items = filterEntries(allItems, query);
-	};
+	$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;