@isoftdata/svelte-load-item-modal

Svelte LoadItemModal

Install

pnpm i @isoftdata/svelte-load-item-modal

Breaking changes

2.0.0

• Require Svelte 5
• Slots -> Snippets
• Events -> Callbacks
• Removed: show prop (use open() function instead)
• Removed: itemTitle prop. Pass title, inputPlaceholder, & noResultsText props instead if you want to customize those strings.
• Tagged for translation

Props

Name	Type	Description	Default Value
allowEmptySearch	boolean	Whether to allow searching without a search string.	false
itemIdProp	keyof T	The property name for the item ID. Used for the default slot's default content	Required
itemDisplayProp	keyof T	The property name for the item display. Used for the default slot's default content	Required
modalSize	ComponentProps<Modal>['modalSize']	The size of the modal	''
title	string | undefined	The title to use instead of the default. Useful if you want to translate this component.	'Find Items'
inputPlaceholder	string | undefined	The input placeholder to use instead of the default. Useful if you want to translate this component.	title ?? 'Find Items'
noResultsText	string | undefined	The text to show when there are no results instead of the default. Useful if you want to translate this component.	'No Matching Items Found'
inputProps	Omit<ComponentProps<typeof Input<string>>, 'value' | 'input' | 'isLoading' | 'placeholder' | 'size' | 'showLabel' | 'isLoading'>	Props to be passed to the input component	{}

Snippets

• children - The inner html content of each "item" in the results list. Props item and index are available on this slot
• filters - Renders just above the search input, good for additional filters or options.

Note: All Input component snippets(other than append) are available via the inputProps prop.

Callbacks

• chooseItem - Called when an item is clicked with { item: T; index: number }.
• lookupError - Called when doSearch throws an error with an Error class instance.
• cancel - Called when the modal is closed.
• doSearch - Called with a search string argument, should return Promise<Array<T>> (required).

Functions

• open(searchInput?: string) => void - Opens the modal. If a search string is provided, it will perform a search with that string.

Example

<script lang="ts">
	import LoadItemModal from '@isoftdata/svelte-load-item-modal'

	let loadItemModal: LoadItemModal<{id: number, name: string}> | undefined

	function doSearch() {
		loadItemModal?.open()
	}
</script>

<LoadItemModal
	itemDisplayProp="name"
	itemIdProp="id"
	bind:this={loadItemModal}
	doSearch={searchString => {
		return Promise.resolve(
			[
				{ id: 1, name: 'Apple' },
				{ id: 2, name: 'Banana' },
				{ id: 3, name: 'Watermelon' },
				{ id: 4, name: 'Pineapple' },
				{ id: 5, name: 'Mango' },
				{ id: 6, name: 'Strawberry' },
				{ id: 7, name: 'Blueberry' },
				{ id: 8, name: 'Raspberry' },
				{ id: 9, name: 'Blackberry' },
				{ id: 10, name: 'Kiwi' },
			].filter(item => item.name.toLowerCase().includes(searchString.toLowerCase())),
		)
	}}
	chooseItem={({ item, index }) => {
		console.log('Item chosen:', item, index)
	}}
	onLookupError={error => {
		console.error('Lookup error:', error)
	}}
	cancel={() => {
		console.log('Cancel')
	}}
>
{#snippet children({ item, index })}
	{index + 1} - {item.name}
{/snippet}
</LoadItemModal>