diff --git a/components/package.json b/components/package.json index 78b59808..349f4bb5 100644 --- a/components/package.json +++ b/components/package.json @@ -36,6 +36,7 @@ "dependencies": { "@maplibre/maplibre-gl-geocoder": "1.9.1", "@maplibre/maplibre-gl-inspect": "1.7.1", + "fuse.js": "^7.4.2", "maplibre-gl": "5.20.0", "svelte-select": "5.8.3" }, diff --git a/components/src/Select/Select.stories.svelte b/components/src/Select/Select.stories.svelte index 882bcaa8..d4033c7f 100644 --- a/components/src/Select/Select.stories.svelte +++ b/components/src/Select/Select.stories.svelte @@ -45,6 +45,11 @@ await userEvent.click(clearButton); expect(selectedItem).toEqual(undefined); }); + + await step('The default empty message is shown when nothing matches', async () => { + await userEvent.type(select, 'xyz'); + expect(canvas.getByText('Keine Treffer')).toBeInTheDocument(); + }); }} > + { + const canvas = within(canvasElement); + const select = canvas.getByLabelText('Select'); + + await step('The custom empty message is shown when nothing matches', async () => { + await userEvent.type(select, 'Pizza'); + expect(canvas.getByText('Keine passenden Eissorten')).toBeInTheDocument(); + }); + }} +> + + + + { + const canvas = within(canvasElement); + const select = canvas.getByLabelText('Berufe'); + + await step('An exact title still selects that item with fuzzy enabled', async () => { + await userEvent.type(select, 'Tierpflege{enter}'); + expect(selectedItem?.details.title).toEqual('Tierpflege'); + }); + + await step('A typo in the title still matches the closest item', async () => { + await userEvent.type(select, 'Journlismus{enter}'); + expect(selectedItem?.details.title).toEqual('Journalismus'); + }); + + await step('A typo in the add-on still matches the closest item', async () => { + await userEvent.type(select, 'Hundetrener{enter}'); + expect(selectedItem?.details.title).toEqual('Tierpflege'); + }); + }} +> + + {#snippet demoComponent()} + Berufe + a.label.localeCompare(b.label)) + .map((item) => ({ + value: item.value, + label: `${item.label}: ${item.add_on}`, // used for filtering + details: { + title: item.label, // used for display + addon: item.add_on // used for display + } + }))} + groupHeaderSelectable={false} + > + + + {item.details.title} + + {item.details.addon} + + + {selection.details.title} + + + {/snippet} + + + diff --git a/mock-sveltekit/package.json b/mock-sveltekit/package.json index 9bb14a27..d3e9f00c 100644 --- a/mock-sveltekit/package.json +++ b/mock-sveltekit/package.json @@ -16,6 +16,7 @@ "dependencies": { "@maplibre/maplibre-gl-geocoder": "1.9.1", "@maplibre/maplibre-gl-inspect": "1.7.1", + "fuse.js": "7.4.2", "maplibre-gl": "5.20.0", "svelte-select": "5.8.3" }, diff --git a/package-lock.json b/package-lock.json index 336af8e0..22ce41fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "dependencies": { "@maplibre/maplibre-gl-geocoder": "1.9.1", "@maplibre/maplibre-gl-inspect": "1.7.1", + "fuse.js": "^7.4.2", "maplibre-gl": "5.20.0", "svelte-select": "5.8.3" }, @@ -313,6 +314,7 @@ "dependencies": { "@maplibre/maplibre-gl-geocoder": "1.9.1", "@maplibre/maplibre-gl-inspect": "1.7.1", + "fuse.js": "7.4.2", "maplibre-gl": "5.20.0", "svelte-select": "5.8.3" }, @@ -12852,6 +12854,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/fuse.js": { + "version": "7.4.2", + "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.4.2.tgz", + "integrity": "sha512-LVbzjD4WA6UP5B1UnP8wuaXJiLnqMdM/E4fiJXTJ5haJ5b/MBNsK29h2fm6swEoQaVQjvYFWKLE2RanyZIoRVQ==", + "license": "Apache-2.0", + "engines": { + "node": ">=10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/krisk" + } + }, "node_modules/fuzzy": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/fuzzy/-/fuzzy-0.1.3.tgz",
{item.details.addon}