From c6f6f64d7727a779310083d672d8850a3c884673 Mon Sep 17 00:00:00 2001 From: Dustin Davis Date: Thu, 15 Sep 2022 16:26:04 -0600 Subject: [PATCH 1/2] highlight phrases for new search queries --- src/components/tables/c-table/c-table-interfaces.ts | 5 +++++ .../td-contents/c-td-truncate/c-td-truncate.ts | 8 ++++++++ src/helpers/highlight-phrases.ts | 13 +++++++++++++ 3 files changed, 26 insertions(+) create mode 100644 src/helpers/highlight-phrases.ts 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; +}; From 5e12e8e946e073ee182ee0661bd33507726c0f63 Mon Sep 17 00:00:00 2001 From: Dustin Davis Date: Thu, 15 Sep 2022 16:28:58 -0600 Subject: [PATCH 2/2] update version --- dev-app/app.html | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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"