diff --git a/README.md b/README.md index 8610c63..467d62f 100644 --- a/README.md +++ b/README.md @@ -117,7 +117,10 @@ searchJs.open() async function getFromApi(keyword = '') { let res = await fetch('https://dummyjson.com/products/search?q=' + keyword) let json = await res.json() - return json.products + return json.products.map((p) => { + p.icon = `` + return p + }) } const searchJs = SearchJS({ @@ -145,6 +148,7 @@ const searchJs = SearchJS({ | `data` | YES | data to search | | `data.title` | YES | data title | | `data.description` | NO | data description | +| `data.icon` | NO | data icon (can use html string, svg string etc...) | | `element` | NO | element to append search-js | | `theme` | NO | color code or theme name (`#FF2E1F`, `github-light`, `github-dark`) | | `darkMode` | NO | default `false`. set `true` for dark mode | diff --git a/index.html b/index.html index 2a1c5fe..cddbd8c 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,13 @@ font-family: 'Source Sans Pro', sans-serif; background-color: #424243; } + .product-image { + width: 50px; + height: 50px; + object-fit: contain; + background: #ededed; + border-radius: 5px; + } @@ -21,7 +28,10 @@ async function getFromApi(keyword = '') { let res = await fetch('https://dummyjson.com/products/search?q='+keyword) let json = await res.json() - return json.products + return json.products.map((p) => { + p.icon = `` + return p + }) } const searchJs = SearchJS({ diff --git a/src/components/Item.ts b/src/components/Item.ts index 41e18b3..49fba71 100644 --- a/src/components/Item.ts +++ b/src/components/Item.ts @@ -55,7 +55,7 @@ export class Item { render({ item, icon, hideRemoveButton = false }: ItemComponentPayload): string { const dataPayload = Encoder.encode(item) return `
-
${icon}
+
${item.icon ?? icon}
${item.title}
${item.description ? `
${item.description}
` : ``} diff --git a/src/index.ts b/src/index.ts index 5ac87bf..b56c565 100644 --- a/src/index.ts +++ b/src/index.ts @@ -107,7 +107,10 @@ declare global { SearchJS: (config: SearchJSConfig) => SearchJSApp } } -window.SearchJS = SearchJS + +if (typeof window !== 'undefined') { + window.SearchJS = SearchJS +} export default SearchJS export * from './types' diff --git a/src/types/index.ts b/src/types/index.ts index 7fda3b0..26aac32 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -8,22 +8,72 @@ export enum SearchJSTheme { export interface SearchJSItem { title: string description?: string + icon?: string [propName: string]: any } export interface SearchJSConfig { + /** + * element to append search-js + */ element?: HTMLElement + + /** + * color code or theme name (`#FF2E1F`, `github-light`, `github-dark`) + */ theme?: string + + /** + * width of search-js compoment + */ width?: string + + /** + * height of search-js compoment + */ height?: string + + /** + * enable dark mode + */ darkMode?: boolean + + /** + * position from the top + * default: 85px + */ positionTop?: string + + /** + * data to show on the list + */ data?: Array + + /** + * customize search input + */ search?: { icon?: string placeholder?: string } + + /** + * search after x delay in ms + * default - 500ms + */ onSearchDelay?: number + + /** + * handle on search input + * @param keyword + * @returns Array | Promise> + */ onSearch?: (keyword: string) => Array | Promise> + + /** + * handle the action after the item is selected + * @param data + * @returns void + */ onSelected: (data: SearchJSItem) => void }