@isoftdata/svelte-load-item-modal

Svelte LoadItemModal

Install

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

Props

Name	Type	Description	Default Value
allowEmptySearch	boolean	Whether to allow searching without a search string.	false
itemTitle	string	The title of the item. Shown in the header and input placeholder.	'Item'
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	''
doSearch	(searchString: string) => Promise<Array<T>>	The search function	Required
title	string | undefined	The title to use instead of the default. Useful if you want to translate this component.	computed based on itemTitle
inputPlaceholder	string | undefined	The input placeholder to use instead of the default. Useful if you want to translate this component.	computed based on itemTitle
noResultsText	string | undefined	The text to show when there are no results instead of the default. Useful if you want to translate this component.	computed based on itemTitle

Slots

• default - The inner html content of each "item" in the results list. Props item and index are available on this slot

Events

• chooseItem - Fired when an item is clicked. detail is { item: T; index: number }
• lookupError - Fired when doSearch throws an error. detail is {error: Error}
• cancel - Fired when the modal is closed. detail is void

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"
	itemTitle="Fruit"
	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())),
		)
	}}
	on:chooseItem={event => {
		console.log('Item chosen:', event.detail)
	}}
	on:onLookupError={event => {
		console.error('Lookup error:', event.detail)
	}}
	on:cancel={() => {
		console.log('Cancel')
	}}
	let:item
>{item.name}</LoadItemModal>