diff --git a/dev-app/app.html b/dev-app/app.html index ef22d170..bd02b87d 100644 --- a/dev-app/app.html +++ b/dev-app/app.html @@ -52,7 +52,7 @@ diff --git a/package.json b/package.json index a1757fc1..50e19002 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@bindable-ui/bindable", "description": "An Aurelia component library", - "version": "1.11.6", + "version": "1.11.7", "repository": { "type": "git", "url": "https://github.com/bindable-ui/bindable" diff --git a/src/components/tables/c-table/c-table-interfaces.ts b/src/components/tables/c-table/c-table-interfaces.ts index 7c53f870..51bacbff 100644 --- a/src/components/tables/c-table/c-table-interfaces.ts +++ b/src/components/tables/c-table/c-table-interfaces.ts @@ -71,6 +71,11 @@ export interface CTableCol { * If you need to highlight a search string in the table (currently only supported on c-td-truncate) */ getSearchVal?(): string; + + /** + * For custom search queries, pass in the words and phrases in an array that you would like to highlight + */ + getSearchPhrases?(): string[]; } export interface CTableActions { diff --git a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.ts b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.ts index 39424c72..efbb7667 100644 --- a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.ts +++ b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.ts @@ -3,6 +3,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms. */ +import {highlightSearchPhrases} from '../../../../helpers/highlight-phrases'; import {highlightSearchText} from '../../../../helpers/highlight-text'; import * as styles from './c-td-truncate.css.json'; @@ -23,5 +24,12 @@ export class CTdTruncate { this.searchHighlight = highlightSearchText(searchVal, this.value); } } + + if (model.col && _.isFunction(model.col.getSearchPhrases)) { + const searchPhrases = model.col.getSearchPhrases(); + if (searchPhrases.length > 0) { + this.searchHighlight = highlightSearchPhrases(searchPhrases, this.value); + } + } } } diff --git a/src/helpers/highlight-phrases.ts b/src/helpers/highlight-phrases.ts new file mode 100644 index 00000000..77e93224 --- /dev/null +++ b/src/helpers/highlight-phrases.ts @@ -0,0 +1,13 @@ +export const highlightSearchPhrases = (searchPhrases: string[], matchAgainst?: string): string => { + let title = matchAgainst || ''; + title = title + .replace('&', '&') + .replace('<', '<') + .replace('>', '>'); + if (searchPhrases && searchPhrases.length > 0) { + searchPhrases.forEach(orig => { + title = title.replace(orig, `${orig}`); + }); + } + return title; +};