noph-ui 0.15.5 → 0.16.0

package/dist/menu/Menu.svelte

@@ -7,6 +7,7 @@
 		element = $bindable(),
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
+		style,
 		...attributes
 	}: MenuProps = $props()
 
@@ -57,29 +58,36 @@
 	$effect(refreshValues)
 
 	const getScrollableParent = (start: HTMLElement) => {
-		let element: HTMLElement | null = start
-		while (element) {
-			const style = getComputedStyle(element)
+		let el: HTMLElement | null = start
+		while (el) {
+			const style = getComputedStyle(el)
 			const overflowY = style.overflowY
 			const overflowX = style.overflowX
 			const isScrollableY =
-				(overflowY === 'auto' || overflowY === 'scroll') &&
-				element.scrollHeight > element.clientHeight
+				(overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight
 			const isScrollableX =
-				(overflowX === 'auto' || overflowX === 'scroll') &&
-				element.scrollWidth > element.clientWidth
+				(overflowX === 'auto' || overflowX === 'scroll') && el.scrollWidth > el.clientWidth
 
 			if (isScrollableY || isScrollableX) {
-				return element
+				return el
 			}
 
-			element = element.parentElement
+			el = el.parentElement
 		}
 		return window
 	}
 
 	$effect(() => {
 		if (anchor && element) {
+			if (style) {
+				const styleEntries = style
+					.split(';')
+					.filter(Boolean)
+					.map((entry) => entry.split(':').map((str) => str.trim()))
+				styleEntries.forEach(([key, value]) => {
+					element?.style.setProperty(key, value)
+				})
+			}
 			getScrollableParent(element).addEventListener(
 				'scroll',
 				() => {

package/dist/select/Check.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	let { checked = $bindable(), disabled = false }: { checked: boolean; disabled?: boolean } =
+		$props()
+</script>
+
+<div class={['np-host']}>
+	<div
+		class={['np-container', checked ? 'checked' : 'unchecked', disabled ? 'disabled' : 'enabled']}
+	>
+		<div class="np-outline"></div>
+		<div class="np-background"></div>
+		<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
+			<rect class="mark short" />
+			<rect class="mark long" />
+		</svg>
+	</div>
+</div>
+
+<style>
+	.np-host {
+		border-start-start-radius: var(--np-checkbox-container-shape, 2px);
+		border-start-end-radius: var(--np-checkbox-container-shape, 2px);
+		border-end-end-radius: var(--np-checkbox-container-shape, 2px);
+		border-end-start-radius: var(--np-checkbox-container-shape, 2px);
+		display: inline-flex;
+		height: 18px;
+		position: relative;
+		vertical-align: top;
+		width: 18px;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+	}
+	.np-container {
+		border-radius: inherit;
+		display: flex;
+		height: 100%;
+		place-content: center;
+		place-items: center;
+		position: relative;
+		width: 100%;
+	}
+	.np-outline,
+	.np-background,
+	.np-icon {
+		inset: 0;
+		position: absolute;
+	}
+	.np-outline,
+	.np-background {
+		border-radius: inherit;
+	}
+	.np-outline {
+		border-color: var(--np-checkbox-outline-color, var(--np-color-on-surface-variant));
+		border-style: solid;
+		border-width: 2px;
+		box-sizing: border-box;
+	}
+	:where(:hover) .np-outline {
+		border-color: var(--np-color-on-surface);
+		border-width: 2px;
+	}
+	:where(:focus-within) .np-outline {
+		border-color: var(--np-color-on-surface);
+		border-width: 2px;
+	}
+
+	.np-container.disabled .np-outline {
+		border-color: var(--np-color-on-surface);
+		border-width: 2px;
+		opacity: 0.38;
+	}
+	.np-container.checked.disabled .np-outline {
+		visibility: hidden;
+	}
+	.np-background {
+		background-color: var(--np-checkbox-selected-container-color, var(--np-color-primary));
+	}
+	.np-background,
+	.np-icon {
+		opacity: 0;
+		transition-duration: 150ms, 50ms;
+		transition-property: transform, opacity;
+		transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15), linear;
+		transform: scale(0.6);
+	}
+	.np-container.checked .np-background,
+	.np-container.checked .np-icon {
+		opacity: 1;
+		transition-duration: 350ms, 50ms;
+		transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1), linear;
+		transform: scale(1);
+	}
+	.np-container.checked.disabled .np-background {
+		background: var(--np-color-on-surface);
+		opacity: 0.38;
+	}
+	.np-icon {
+		fill: var(--np-checkbox-selected-icon-color, var(--np-color-on-primary));
+		height: 18px;
+		width: 18px;
+	}
+	.np-container.disabled .np-icon {
+		fill: var(--np-color-surface);
+	}
+	.np-container .mark.short {
+		height: 5.6568542495px;
+	}
+	.np-container.checked .mark {
+		transition-property: none;
+	}
+	.np-container .mark {
+		transform: scaleY(-1) translate(7px, -14px) rotate(45deg);
+	}
+	.np-container.checked .mark {
+		animation-duration: 350ms;
+		animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
+		transition-duration: 350ms;
+		transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
+	}
+	.mark.short {
+		height: 2px;
+		transition-property: transform, height;
+		width: 2px;
+	}
+	.mark {
+		animation-duration: 150ms;
+		animation-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15);
+		transition-duration: 150ms;
+		transition-timing-function: cubic-bezier(0.3, 0, 0.8, 0.15);
+	}
+	.np-container.checked .mark.long {
+		animation-name: prev-unselected-to-checked;
+	}
+	.np-container .mark.long {
+		width: 11.313708499px;
+	}
+	.mark.long {
+		height: 2px;
+		transition-property: transform, width;
+		width: 10px;
+	}
+	@keyframes prev-unselected-to-checked {
+		from {
+			width: 0;
+		}
+	}
+	@media (forced-colors: active) {
+		.np-background {
+			background-color: CanvasText;
+		}
+
+		.np-container.disabled.checked .np-background {
+			background-color: GrayText;
+			opacity: 1;
+		}
+
+		.np-outline {
+			border-color: CanvasText;
+		}
+
+		.np-container.disabled .np-outline {
+			border-color: GrayText;
+			opacity: 1;
+		}
+
+		.np-icon {
+			fill: Canvas;
+		}
+	}
+</style>

package/dist/select/Check.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    checked: boolean;
+    disabled?: boolean;
+};
+declare const Check: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Check = ReturnType<typeof Check>;
+export default Check;

package/dist/select/Select.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import Menu from '../menu/Menu.svelte'
 	import { isFirstInvalidControlInForm } from '../text-field/report-validity.js'
-	import type { SelectProps } from './types.ts'
+	import type { SelectOption, SelectProps } from './types.ts'
 	import Item from '../list/Item.svelte'
 	import { tick } from 'svelte'
+	import Check from './Check.svelte'
+	import VirtualList from './VirtualList.svelte'
 
 	let {
 		options = [],
@@ -27,10 +29,19 @@
 		autofocus,
 		onchange,
 		oninput,
+		multiple,
 		...attributes
 	}: SelectProps = $props()
 
 	const uid = $props.id()
+	if (value === undefined) {
+		if (multiple) {
+			value = options.filter((option) => option.selected).map((option) => option.value)
+		} else {
+			value = options.find((option) => option.selected)?.value
+		}
+	}
+	let selectedOption = $state(options.filter((option) => option.selected))
 
 	let errorTextRaw: string = $state(errorText)
 	let errorRaw = $state(error)
@@ -40,11 +51,24 @@
 	let field: HTMLDivElement | undefined = $state()
 	let clientWidth = $state(0)
 	let menuOpen = $state(false)
-	let selectedLabel = $derived.by<string>(() => {
+	let selectedLabel = $derived.by<string | string[]>(() => {
+		if (multiple) {
+			if (value && Array.isArray(value)) {
+				return value
+					.map((v) => options.find((option) => option.value === v)?.label || '')
+					.filter((o) => o)
+					.join(', ')
+			}
+			return ''
+		}
 		return options.find((option) => option.value === value)?.label || ''
 	})
 	$effect(() => {
-		if (value !== '' && selectElement?.checkValidity()) {
+		if (
+			value &&
+			(Array.isArray(value) ? value.length !== 0 : value !== '') &&
+			selectElement?.checkValidity()
+		) {
 			errorRaw = error
 			errorTextRaw = errorText
 		}
@@ -56,6 +80,30 @@
 			})
 		}
 	})
+	const handleOptionSelect = (event: Event, option: SelectOption) => {
+		if (multiple) {
+			if (Array.isArray(value)) {
+				if (value.includes(option.value)) {
+					selectedOption = selectedOption.filter((v) => v.value !== option.value)
+					value = value.filter((v) => v !== option.value)
+				} else {
+					selectedOption = [...selectedOption, option]
+					value = [...value, option.value]
+				}
+			} else {
+				selectedOption = [option]
+				value = [option.value]
+			}
+		} else {
+			selectedOption = [option]
+			value = option.value
+			menuElement?.hidePopover()
+		}
+		event.preventDefault()
+		tick().then(() => {
+			selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
+		})
+	}
 </script>
 
 {#snippet arrows()}
@@ -152,34 +200,66 @@
 						</div>
 					{/if}
 					<div class="content">
-						<select
-							tabindex="-1"
-							aria-label={attributes['aria-label'] || label}
-							{disabled}
-							{required}
-							{name}
-							{form}
-							{onchange}
-							{oninput}
-							oninvalid={(event) => {
-								event.preventDefault()
-								const { currentTarget } = event
-								errorRaw = true
-								if (errorText === '') {
-									errorTextRaw = currentTarget.validationMessage
-								}
-								if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
-									field?.focus()
-									menuElement?.showPopover()
-								}
-							}}
-							bind:value
-							bind:this={selectElement}
-						>
-							{#each options as option, index (index)}
-								<option value={option.value} selected={option.selected}>{option.label}</option>
-							{/each}
-						</select>
+						{#if multiple}
+							<select
+								tabindex="-1"
+								aria-label={attributes['aria-label'] || label}
+								{disabled}
+								{required}
+								{name}
+								{form}
+								multiple
+								{onchange}
+								{oninput}
+								oninvalid={(event) => {
+									event.preventDefault()
+									const { currentTarget } = event
+									errorRaw = true
+									if (errorText === '') {
+										errorTextRaw = currentTarget.validationMessage
+									}
+									if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
+										field?.focus()
+										menuElement?.showPopover()
+									}
+								}}
+								bind:value
+								bind:this={selectElement}
+							>
+								{#each selectedOption as option, index (index)}
+									<option value={option.value} selected={option.selected}>{option.label}</option>
+								{/each}
+							</select>
+						{:else}
+							<select
+								tabindex="-1"
+								aria-label={attributes['aria-label'] || label}
+								{disabled}
+								{required}
+								{name}
+								{form}
+								{onchange}
+								{oninput}
+								oninvalid={(event) => {
+									event.preventDefault()
+									const { currentTarget } = event
+									errorRaw = true
+									if (errorText === '') {
+										errorTextRaw = currentTarget.validationMessage
+									}
+									if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
+										field?.focus()
+										menuElement?.showPopover()
+									}
+								}}
+								bind:value
+								bind:this={selectElement}
+							>
+								{#each selectedOption as option, index (index)}
+									<option value={option.value} selected={option.selected}>{option.label}</option>
+								{/each}
+							</select>
+						{/if}
 						<div class="input">
 							{#if selectedLabel}
 								{selectedLabel}
@@ -208,6 +288,41 @@
 	</div>
 </div>
 
+{#snippet item(option: SelectOption, width?: number)}
+	<Item
+		onclick={(event) => {
+			handleOptionSelect(event, option)
+			field?.focus()
+		}}
+		disabled={option.disabled}
+		onkeydown={(event) => {
+			if (event.key === 'ArrowDown') {
+				;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
+				event.preventDefault()
+			}
+			if (event.key === 'ArrowUp') {
+				;(event.currentTarget?.previousElementSibling as HTMLElement)?.focus()
+				event.preventDefault()
+			}
+			if (event.key === 'Enter') {
+				handleOptionSelect(event, option)
+			}
+			if (event.key === 'Tab') {
+				menuElement?.hidePopover()
+			}
+		}}
+		variant="button"
+		style={width ? `width:${width}px` : ''}
+		selected={Array.isArray(value) ? value.includes(option.value) : value === option.value}
+		>{option.label}
+		{#snippet start()}
+			{#if Array.isArray(value) && multiple}
+				<Check disabled={option.disabled} checked={value.includes(option.value)} />
+			{/if}
+		{/snippet}
+	</Item>
+{/snippet}
+
 <Menu
 	style="position-anchor:--{uid};min-width:{clientWidth}px;"
 	popover="manual"
@@ -228,43 +343,17 @@
 	}}
 	bind:element={menuElement}
 >
-	{#each options as option, index (index)}
-		<Item
-			onclick={(event) => {
-				value = option.value
-				menuElement?.hidePopover()
-				field?.focus()
-				event.preventDefault()
-				tick().then(() => {
-					selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
-				})
-			}}
-			onkeydown={(event) => {
-				if (event.key === 'ArrowDown') {
-					;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
-					event.preventDefault()
-				}
-				if (event.key === 'ArrowUp') {
-					;(event.currentTarget?.previousElementSibling as HTMLElement)?.focus()
-					event.preventDefault()
-				}
-				if (event.key === 'Enter') {
-					value = option.value
-					menuElement?.hidePopover()
-					event.preventDefault()
-					tick().then(() => {
-						selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
-					})
-				}
-				if (event.key === 'Tab') {
-					menuElement?.hidePopover()
-				}
-			}}
-			variant="button"
-			selected={value === option.value}
-			>{option.label}
-		</Item>
-	{/each}
+	{#if options.length > 100}
+		<VirtualList width="{clientWidth}px" height="250px" itemHeight={56} items={options}>
+			{#snippet row(option)}
+				{@render item(option, clientWidth - 15)}
+			{/snippet}
+		</VirtualList>
+	{:else}
+		{#each options as option, index (index)}
+			{@render item(option)}
+		{/each}
+	{/if}
 </Menu>
 
 <style>
@@ -430,6 +519,8 @@
 
 	.content select {
 		width: 0;
+		height: 0;
+		visibility: hidden;
 	}
 
 	.middle {

package/dist/select/VirtualList.svelte

@@ -0,0 +1,181 @@
+<script lang="ts" generics="T">
+	import { onMount, tick, type Snippet } from 'svelte'
+	import type { HTMLAttributes } from 'svelte/elements'
+
+	interface VitualListProps extends HTMLAttributes<HTMLDivElement> {
+		items: T[]
+		height?: string
+		width?: string
+		itemHeight?: number
+		start?: number
+		end?: number
+		row: Snippet<[T]>
+	}
+	// props
+	let {
+		items,
+		height = '100%',
+		width,
+		itemHeight,
+		start = $bindable(0),
+		end = $bindable(0),
+		row,
+	}: VitualListProps = $props()
+
+	// local state
+	let height_map: number[] = []
+	// eslint-disable-next-line no-undef
+	let rows: HTMLCollectionOf<HTMLElement> | undefined = $state()
+	let viewport: HTMLElement | undefined = $state()
+	let contents: HTMLDivElement | undefined = $state()
+	let viewport_height: number = $state(0)
+	let mounted = $state()
+
+	let top = $state(0)
+	let bottom = $state(0)
+	let average_height: number = $state(0)
+
+	$effect(() => {
+		if (mounted) {
+			refresh(items, viewport_height, itemHeight)
+		}
+	})
+	let visible = $derived(
+		items.slice(start, end).map((data, i) => {
+			return { index: i + start, data }
+		}),
+	)
+
+	async function refresh(items: T[], viewport_height: number, itemHeight?: number) {
+		if (!viewport || !rows) {
+			return
+		}
+		const { scrollTop } = viewport
+
+		await tick() // wait until the DOM is up to date
+
+		let content_height = top - scrollTop
+		let i = start
+
+		while (content_height < viewport_height && i < items.length) {
+			let row = rows[i - start]
+
+			if (!row) {
+				end = i + 1
+				await tick() // render the newly visible row
+				row = rows[i - start]
+			}
+
+			const row_height = (height_map[i] = itemHeight || row.offsetHeight)
+			content_height += row_height
+			i += 1
+		}
+
+		end = i
+
+		const remaining = items.length - end
+		average_height = (top + content_height) / end
+
+		bottom = remaining * average_height
+		height_map.length = items.length
+	}
+
+	async function handle_scroll() {
+		if (!viewport || !rows) {
+			return
+		}
+
+		const { scrollTop } = viewport
+
+		const old_start = start
+
+		for (let v = 0; v < rows.length; v += 1) {
+			height_map[start + v] = itemHeight || rows[v].offsetHeight
+		}
+
+		let i = 0
+		let y = 0
+
+		while (i < items.length) {
+			const row_height = height_map[i] || average_height
+			if (y + row_height > scrollTop) {
+				start = i
+				top = y
+
+				break
+			}
+
+			y += row_height
+			i += 1
+		}
+
+		while (i < items.length) {
+			y += height_map[i] || average_height
+			i += 1
+
+			if (y > scrollTop + viewport_height) break
+		}
+
+		end = i
+
+		const remaining = items.length - end
+		average_height = y / end
+
+		height_map.fill(average_height, i, items.length)
+		bottom = remaining * average_height
+
+		// prevent jumping if we scrolled up into unknown territory
+		if (start < old_start) {
+			await tick()
+
+			let expected_height = 0
+			let actual_height = 0
+
+			for (let i = start; i < old_start; i += 1) {
+				if (rows[i - start]) {
+					expected_height += height_map[i]
+					actual_height += itemHeight || rows[i - start].offsetHeight
+				}
+			}
+
+			const d = actual_height - expected_height
+			viewport.scrollTo(0, scrollTop + d)
+		}
+
+		// TODO if we overestimated the space these
+		// rows would occupy we may need to add some
+		// more. maybe we can just call handle_scroll again?
+	}
+
+	// trigger initial refresh
+	onMount(() => {
+		// eslint-disable-next-line no-undef
+		rows = contents?.children as HTMLCollectionOf<HTMLElement>
+		mounted = true
+	})
+</script>
+
+<svelte-virtual-list-viewport
+	bind:this={viewport}
+	bind:offsetHeight={viewport_height}
+	onscroll={handle_scroll}
+	style="display:flex;height: {height};width: {width};"
+>
+	<div
+		bind:this={contents}
+		style="flex:1;display:block;padding-top: {top}px; padding-bottom: {bottom}px;"
+	>
+		{#each visible as entry (entry.index)}
+			{@render row(entry.data)}
+		{/each}
+	</div>
+</svelte-virtual-list-viewport>
+
+<style>
+	svelte-virtual-list-viewport {
+		position: relative;
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+		display: block;
+	}
+</style>

package/dist/select/VirtualList.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare class __sveltets_Render<T> {
+    props(): HTMLAttributes<HTMLDivElement> & {
+        items: T[];
+        height?: string;
+        width?: string;
+        itemHeight?: number;
+        start?: number;
+        end?: number;
+        row: Snippet<[T]>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "start" | "end";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const VirtualList: $$IsomorphicComponent;
+type VirtualList<T> = InstanceType<typeof VirtualList<T>>;
+export default VirtualList;

package/dist/select/types.d.ts

@@ -1,6 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
-export interface SelectProps extends Omit<HTMLSelectAttributes, 'multiple' | 'size' | 'autocomplete'> {
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+    selected?: boolean | undefined | null;
+}
+export interface SelectProps extends Omit<HTMLSelectAttributes, 'size' | 'autocomplete'> {
     label?: string;
     supportingText?: string;
     error?: boolean;
@@ -10,9 +16,5 @@ export interface SelectProps extends Omit<HTMLSelectAttributes, 'multiple' | 'si
     end?: Snippet;
     noAsterisk?: boolean;
     element?: HTMLSpanElement;
-    options: {
-        value: string | number;
-        label: string;
-        selected?: boolean | undefined | null;
-    }[];
+    options: SelectOption[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.15.5",
+  "version": "0.16.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {