Skip to content

Commit

Permalink
feat(kit): highlight improvements
Browse files Browse the repository at this point in the history
1. Adding support for multiple occurrences
2. Adding support for multiple highlights
3. Adding support for case-sensitive mode
4. Adding support for regexp
MillerSvt committed Jun 5, 2024
1 parent 188fda6 commit e289cd8
Showing 31 changed files with 971 additions and 122 deletions.
1 change: 1 addition & 0 deletions projects/cdk/types/array-or-value.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export type TuiArrayOrValue<T> = T | readonly T[];
1 change: 1 addition & 0 deletions projects/cdk/types/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './array-or-value';
export * from './context';
export * from './deep-partial';
export * from './event-with';
1 change: 1 addition & 0 deletions projects/cdk/utils/miscellaneous/index.ts
Original file line number Diff line number Diff line change
@@ -24,5 +24,6 @@ export * from './provide';
export * from './provide-options';
export * from './pure';
export * from './px';
export * from './to-array';
export * from './uniq-by';
export * from './with-styles';
5 changes: 5 additions & 0 deletions projects/cdk/utils/miscellaneous/to-array.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type {TuiArrayOrValue} from '@taiga-ui/cdk/types';

export function tuiToArray<T>(value: TuiArrayOrValue<T>): readonly T[] {
return value instanceof Array ? value : [value];
}
Original file line number Diff line number Diff line change
@@ -4,7 +4,10 @@
>
Search
</tui-input>
<table class="tui-space_top-4">
<table
class="tui-space_top-4"
[tuiHighlight]="search"
>
<thead>
<tr>
<th>Member</th>
@@ -14,11 +17,7 @@
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td
*ngFor="let cell of row"
[tuiHighlight]="search"
[tuiHighlightColor]="'#228B22'"
>
<td *ngFor="let cell of row">
{{ cell }}
</td>
</tr>
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
:host {
display: block;
--tui-highlight-background: var(--tui-primary);
--tui-highlight-radius: 5px;
--tui-highlight-color: var(--tui-base-01);
}

table {
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<tui-input
tuiTextfieldIconLeft="tuiIconSearchLarge"
[(ngModel)]="search"
>
Search
</tui-input>
<table
tuiHighlightMultiOccurrences
class="tui-space_top-4"
[tuiHighlight]="search"
>
<thead>
<tr>
<th>Member</th>
<th>Nickname</th>
<th>Fate</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let cell of row">
{{ cell }}
</td>
</tr>
</tbody>
</table>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
:host {
display: block;
--tui-highlight-background: var(--tui-primary);
--tui-highlight-radius: 5px;
--tui-highlight-color: var(--tui-base-01);
}

table {
width: 100%;
border-spacing: 0;
}

th,
td {
text-align: left;
border: 1px solid var(--tui-base-03);
height: 3.375rem;
padding: 0 1rem;
vertical-align: middle;
}
34 changes: 34 additions & 0 deletions projects/demo/src/modules/directives/highlight/examples/2/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiTextfieldControllerModule} from '@taiga-ui/core';
import {TuiHighlightDirective} from '@taiga-ui/kit';
import {TuiInputModule} from '@taiga-ui/legacy';

@Component({
standalone: true,
imports: [
TuiInputModule,
TuiTextfieldControllerModule,
FormsModule,
NgForOf,
TuiHighlightDirective,
],
templateUrl: './index.html',
styleUrls: ['./index.less'],
encapsulation,
changeDetection,
})
export default class ExampleComponent {
protected search = '';

protected readonly rows = [
['King Arthur', '-', 'Arrested'],
['Sir Bedevere', 'The Wise', 'Arrested'],
['Sir Lancelot', 'The Brave', 'Arrested'],
['Sir Galahad', 'The Chaste', 'Killed'],
['Sir Robin', 'The Not-Quite-So-Brave-As-Sir-Lancelot', 'Killed'],
];
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<table
tuiHighlightMultiOccurrences
class="tui-space_top-4"
[tuiHighlight]="regexp"
>
<thead>
<tr>
<th>Member</th>
<th>Nickname</th>
<th>Fate</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let cell of row">
{{ cell }}
</td>
</tr>
</tbody>
</table>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
:host {
display: block;
--tui-highlight-background: var(--tui-primary);
--tui-highlight-radius: 5px;
--tui-highlight-color: var(--tui-base-01);
}

table {
width: 100%;
border-spacing: 0;
}

th,
td {
text-align: left;
border: 1px solid var(--tui-base-03);
height: 3.375rem;
padding: 0 1rem;
vertical-align: middle;
}
25 changes: 25 additions & 0 deletions projects/demo/src/modules/directives/highlight/examples/3/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHighlightDirective} from '@taiga-ui/kit';

@Component({
standalone: true,
imports: [NgForOf, TuiHighlightDirective],
templateUrl: './index.html',
styleUrls: ['./index.less'],
encapsulation,
changeDetection,
})
export default class ExampleComponent {
protected readonly rows = [
['King Arthur', '-', 'Arrested'],
['Sir Bedevere', 'The Wise', 'Arrested'],
['Sir Lancelot', 'The Brave', 'Arrested'],
['Sir Galahad', 'The Chaste', 'Killed'],
['Sir Robin', 'The Not-Quite-So-Brave-As-Sir-Lancelot', 'Killed'],
];

protected readonly regexp = [/S[a-z]+/g, /A[a-z]+/g];
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<table
tuiHighlightMultiOccurrences
class="tui-space_top-4"
[tuiHighlight]="search | tuiToRegexp"
>
<thead>
<tr>
<th>Member</th>
<th>Nickname</th>
<th>Fate</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<td *ngFor="let cell of row">
{{ cell }}
</td>
</tr>
</tbody>
</table>
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
:host {
display: block;
--tui-highlight-background: var(--tui-primary);
--tui-highlight-radius: 5px;
--tui-highlight-color: var(--tui-base-01);
}

table {
width: 100%;
border-spacing: 0;
}

th,
td {
text-align: left;
border: 1px solid var(--tui-base-03);
height: 3.375rem;
padding: 0 1rem;
vertical-align: middle;
}
26 changes: 26 additions & 0 deletions projects/demo/src/modules/directives/highlight/examples/4/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiHighlightDirective, TuiToRegexpPipe} from '@taiga-ui/kit';

@Component({
standalone: true,
imports: [NgForOf, TuiHighlightDirective, TuiToRegexpPipe],
templateUrl: './index.html',
styleUrls: ['./index.less'],
encapsulation,
changeDetection,
})
export default class ExampleComponent {
protected readonly rows = [
['King Arthur', '-', 'Arrested'],
['Sir Bedevere', 'The Wise', 'Arrested'],
['Sir Lancelot', 'The Brave', 'Arrested'],
['Sir Galahad', 'The Chaste', 'Killed'],
['Sir Robin', 'The Not-Quite-So-Brave-As-Sir-Lancelot', 'Killed'],
];

/* cspell:disable-next-line */
protected readonly search = ['Sir', 'Arrested', 'killed'];
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
```html
<div
class="block"
[tuiHighlight]="query"
[tuiHighlightColor]="'#228B22'"
>
...
</div>
25 changes: 23 additions & 2 deletions projects/demo/src/modules/directives/highlight/index.html
Original file line number Diff line number Diff line change
@@ -7,11 +7,32 @@
<p>Directive is used to highlight text in element</p>

<tui-doc-example
id="usage"
heading="Usage"
id="single-occurrence-usage"
heading="Single Occurrence Usage"
[component]="1 | tuiComponent"
[content]="1 | tuiExample"
/>

<tui-doc-example
id="multi-occurrences-usage"
heading="Multi Occurrences Usage"
[component]="2 | tuiComponent"
[content]="2 | tuiExample"
/>

<tui-doc-example
id="regexp-array-usage"
heading="Regexp Array Usage"
[component]="3 | tuiComponent"
[content]="3 | tuiExample"
/>

<tui-doc-example
id="search-array-usage"
heading="Search Array Usage"
[component]="4 | tuiComponent"
[content]="4 | tuiExample"
/>
</ng-template>

<tui-setup *pageTab="'Setup'" />
3 changes: 3 additions & 0 deletions projects/demo/src/utils/setup.component.ts
Original file line number Diff line number Diff line change
@@ -35,6 +35,9 @@ export class TuiSetupComponent {
@Input()
public template: TuiRawLoaderContent = '';

@Input()
public styles: TuiRawLoaderContent = '';

@tuiPure
protected get computedImport(): TuiRawLoaderContent {
return (
4 changes: 4 additions & 0 deletions projects/kit/directives/highlight/highlight-occurrence.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface TuiHighlightOccurrence {
index: number;
length: number;
}
10 changes: 10 additions & 0 deletions projects/kit/directives/highlight/highlight.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {ChangeDetectionStrategy, Component} from '@angular/core';

@Component({
standalone: true,
selector: 'mark[tuiHighlightMark]',
template: '',
styleUrls: ['./highlight.style.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TuiHighlightComponent {}
Loading

0 comments on commit e289cd8

Please sign in to comment.