23 |
25 |
13 |
23 |
14 |
17 |
18 | Weight
15 | {selectedResult.weight}
16 |
19 |
22 | Height
20 | {selectedResult.height}
21 | 50 | {currentTab.text} 51 |
52 | 53 |.sl-overlay overlayClass
3 | .sl-modal modalClass
7 | .sl-header headerClass
10 | .sl-input inputClass
14 | .sl-content contentClass
20 | .sl-results
25 | resultsClass
26 | .sl-results-list.sl-results-item.sl-footer footerClass
40 | headerCenterComponent
9 | contentComponentheaderLeft
8 | headerRight
12 | contentTop
18 | groupHeaderresultsidePanelcontentBottom
31 | footer
33 | {@html Prism.highlight(currentTab.code, Prism.languages.svelte, 'svelte')}
34 |
35 | {result.description}
40 |{result.description}
82 |Multi index Pokemon search
3 |Try searching for "Bulbasaur"
4 |14 | #{result.id} 15 | {result.name} 16 |
17 | {#each result.type as type} 18 | {type} 19 | {/each} 20 |No results found
3 |4 | We can’t find anything with that term at the moment, try searching something else. 5 |
6 |{result.description}
67 |No results...
71 |{description}
10 | {/if} 11 | {/if} 12 | 13 | {#if props.length} 14 || Name | 19 | {#each keys as key} 20 |{key} | 21 | {/each} 22 |
|---|---|
{props.name} |
28 | {#each keys as key}
29 | {props[key]} | 30 | {/each} 31 |
Headless spotlight component for Svelte
24 |Build your site global search box in minutes
25 |Create your package using @sveltejs/package and preview/showcase your work with SvelteKit
3 |Visit kit.svelte.dev to read the documentation
4 | -------------------------------------------------------------------------------- /svelte-spotlight/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/beynar/svelte-spotlight/f3f13ff95bcf9c870f177ea08934f8313f0beea8/svelte-spotlight/static/favicon.png -------------------------------------------------------------------------------- /svelte-spotlight/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import preprocess from 'svelte-preprocess'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://github.com/sveltejs/svelte-preprocess 7 | // for more information about preprocessors 8 | preprocess: preprocess(), 9 | 10 | kit: { 11 | adapter: adapter() 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /svelte-spotlight/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /svelte-spotlight/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import type { UserConfig } from 'vite'; 3 | 4 | const config: UserConfig = { 5 | plugins: [sveltekit()] 6 | }; 7 | 8 | export default config; 9 | --------------------------------------------------------------------------------