Skip to content

Commit

Permalink
Feature/search box (#122)
Browse files Browse the repository at this point in the history
* added search-input atomic component for search-boxes

* added clear event to search-input

* renamed to search dir and added blur event

* change search-box to search package

* changed input into type="search" and added searchDebounce event

* search-box molecule component

* added search module

* added flex="none" scss rule

* added CovalentSearchModule in docs modules

* added doc files

* added demo for search input and search box

* updated docs in demo for search components

* added docblocks to code API

* updated README.md

* added showUnderline input

* feature(search): back icon attribute

* update(search): getter property instead of private member

* added backIcon to readme

* update(search-box): hide float label

* fix(search-box): only hide focused label

* updating backIcon desc
  • Loading branch information
emoralesb05 authored Oct 27, 2016
1 parent 9ea75f3 commit 8783f60
Show file tree
Hide file tree
Showing 19 changed files with 633 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { CovalentJsonFormatterModule } from '../platform/json-formatter';
import { CovalentChipsModule } from '../platform/chips';
import { CovalentChartsModule } from '../platform/charts';
import { CovalentDataTableModule } from '../platform/data-table';
import { CovalentSearchModule } from '../platform/search';

@NgModule({
declarations: [
Expand All @@ -39,6 +40,7 @@ import { CovalentDataTableModule } from '../platform/data-table';
CovalentChipsModule.forRoot(),
CovalentChartsModule.forRoot(),
CovalentDataTableModule.forRoot(),
CovalentSearchModule.forRoot(),
appRoutes,
], // modules needed to run this module
providers: [
Expand Down
5 changes: 5 additions & 0 deletions src/app/components/components/components.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,11 @@ export class ComponentsComponent {
icon: 'show_chart',
route: 'charts',
title: 'Charts',
}, {
description: 'Search and filter items',
icon: 'search',
route: 'search',
title: 'Search',
}, {
description: 'Responsive service & directive',
icon: 'devices',
Expand Down
4 changes: 4 additions & 0 deletions src/app/components/components/components.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { DirectivesComponent } from './directives/directives.component';
import { PipesComponent } from './pipes/pipes.component';
import { ChartsDemoComponent } from './charts/charts.component';
import { DataTableDemoComponent } from './data-table/data-table.component';
import { SearchDemoComponent } from './search/search.component';
import { MaterialComponentsComponent } from './material-components/material-components.component';

import { CovalentCoreModule } from '../../../platform/core';
Expand All @@ -29,6 +30,7 @@ import { CovalentJsonFormatterModule } from '../../../platform/json-formatter';
import { CovalentChipsModule } from '../../../platform/chips';
import { CovalentChartsModule } from '../../../platform/charts';
import { CovalentDataTableModule } from '../../../platform/data-table';
import { CovalentSearchModule } from '../../../platform/search';

@NgModule({
declarations: [
Expand All @@ -49,6 +51,7 @@ import { CovalentDataTableModule } from '../../../platform/data-table';
PipesComponent,
ChartsDemoComponent,
DataTableDemoComponent,
SearchDemoComponent,
MaterialComponentsComponent,
],
imports: [
Expand All @@ -60,6 +63,7 @@ import { CovalentDataTableModule } from '../../../platform/data-table';
CovalentChipsModule.forRoot(),
CovalentChartsModule.forRoot(),
CovalentDataTableModule.forRoot(),
CovalentSearchModule.forRoot(),
componentsRoutes,
],
})
Expand Down
4 changes: 4 additions & 0 deletions src/app/components/components/components.routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { DirectivesComponent } from './directives/directives.component';
import { PipesComponent } from './pipes/pipes.component';
import { ChartsDemoComponent } from './charts/charts.component';
import { DataTableDemoComponent } from './data-table/data-table.component';
import { SearchDemoComponent } from './search/search.component';
import { MaterialComponentsComponent } from './material-components/material-components.component';

const routes: Routes = [{
Expand Down Expand Up @@ -59,6 +60,9 @@ const routes: Routes = [{
}, {
component: DialogsDemoComponent,
path: 'dialogs',
}, {
component: SearchDemoComponent,
path: 'search',
}, {
component: DirectivesComponent,
path: 'directives',
Expand Down
5 changes: 5 additions & 0 deletions src/app/components/components/overview/overview.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,11 @@ export class ComponentsOverviewComponent {
icon: 'show_chart',
route: 'charts',
title: 'Charts',
}, {
color: 'lime-700',
icon: 'search',
route: 'search',
title: 'Search',
}, {
color: 'red-700',
icon: 'devices',
Expand Down
113 changes: 113 additions & 0 deletions src/app/components/components/search/search.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<md-card>
<md-card-title>Search</md-card-title>
<md-card-subtitle>Search and filter items</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<div layout="row" layout-align="start center">
<md-button-toggle-group name="mode" (change)="modeChange()" [(ngModel)]="debounce">
<md-button-toggle md-tooltip="Enter/Clear Events" [value]="0"><md-icon>search</md-icon> Enter/Clear</md-button-toggle>
<md-button-toggle md-tooltip="Debounce Events" [value]="1"><md-icon>keyboard</md-icon> Debounce</md-button-toggle>
</md-button-toggle-group>
</div>
<h3>Search Input</h3>
<p>Search Value: {{searchInputTerm || 'Empty'}}</p>
<div layout="row" layout-align="start center">
<td-search-input *ngIf="debounce" [showUnderline]="true" placeholder="Search here" (searchDebounce)="searchInputTerm = $event"></td-search-input>
<td-search-input *ngIf="!debounce" [showUnderline]="true" placeholder="Search here" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''"></td-search-input>
</div>
<h3>Search Box</h3>
<p>Search Value: {{searchBoxTerm || 'Empty'}}</p>
<div layout-gt-xs="row">
<md-card flex-gt-xs="60">
<div layout="row" layout-align="start center" class="push-left push-right">
<span class="md-title">Card</span>
<span flex></span>
<td-search-box *ngIf="debounce" placeholder="Search here" [alwaysVisible]="alwaysVisible" (searchDebounce)="searchBoxTerm = $event" flex></td-search-box>
<td-search-box *ngIf="!debounce" placeholder="Search here" [alwaysVisible]="alwaysVisible" (search)="searchBoxTerm = $event" (clear)="searchBoxTerm = ''" flex></td-search-box>
</div>
<md-divider></md-divider>
<md-card-content>card content</md-card-content>
</md-card>
</div>
<h3>Search Box in Toolbar</h3>
<md-toolbar color="primary">
<td-search-box backIcon="arrow_back" placeholder="Search here" [alwaysVisible]="alwaysVisible" flex></td-search-box>
<button md-icon-button><md-icon>more_vert</md-icon></button>
</md-toolbar>
</md-card-content>
<md-divider></md-divider>
<md-card-actions>
<button md-button color="primary" (click)="toggleAlwaysVisible()">Toggle Search Box Always Visible</button>
</md-card-actions>
</md-card>
<md-card>
<md-card-title>TdSearchInputComponent</md-card-title>
<md-card-subtitle>How to use this component</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<h2><code><![CDATA[<td-search-input>]]></code></h2>
<p>Use <code><![CDATA[<td-search-input>]]></code> element to generate a search input with its animated cancel button.</p>
<h3>Properties:</h3>
<p>The <code><![CDATA[<td-search-input>]]></code> component has {{searchInputAttrs.length}} properties:</p>
<md-list>
<template let-attr let-last="attr" ngFor [ngForOf]="searchInputAttrs">
<a md-list-item layout-align="row">
<h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
<p md-line> {{attr.description}} </p>
</a>
<md-divider *ngIf="!last"></md-divider>
</template>
</md-list>
<h3>Example:</h3>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-search-input placeholder="Search here" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
</td-search-input>
]]>
</td-highlight>
<h3>Setup:</h3>
<p>Import the [CovalentSearchModule] using the <code>forRoot()</code> method in your NgModule:</p>
<td-highlight lang="typescript">
<![CDATA[
import { CovalentSearchModule } from '@covalent/search';
@NgModule({
imports: [
CovalentSearchModule.forRoot(),
...
],
...
})
export class MyModule {}
]]>
</td-highlight>
</md-card-content>
</md-card>
<md-card>
<md-card-title>TdSearchBoxComponent</md-card-title>
<md-card-subtitle>How to use this component</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<h2><code><![CDATA[<td-search-box>]]></code></h2>
<p>Use <code><![CDATA[<td-search-box>]]></code> element to generate a search box with animations.</p>
<h3>Properties:</h3>
<p>The <code><![CDATA[<td-search-box>]]></code> component has {{searchBoxAttrs.length}} properties:</p>
<md-list>
<template let-attr let-last="attr" ngFor [ngForOf]="searchBoxAttrs">
<a md-list-item layout-align="row">
<h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
<p md-line> {{attr.description}} </p>
</a>
<md-divider *ngIf="!last"></md-divider>
</template>
</md-list>
<h3>Example:</h3>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-search-box backIcon="arrow_back" placeholder="Search here" [showUnderline]="false|true" [debounce]="500" [alwaysVisible]="false|true" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
</td-search-box>
]]>
</td-highlight>
</md-card-content>
</md-card>
Empty file.
85 changes: 85 additions & 0 deletions src/app/components/components/search/search.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { Component } from '@angular/core';

@Component({
selector: 'search-demo',
styleUrls: ['search.component.scss'],
templateUrl: 'search.component.html',
})
export class SearchDemoComponent {

searchInputAttrs: Object[] = [{
description: `Debounce timeout between keypresses. Defaults to 400.`,
name: 'debounce?',
type: 'number',
}, {
description: `Placeholder for the underlying input component.`,
name: 'placeholder?',
type: 'string',
}, {
description: `Sets if the input underline should be visible. Defaults to 'false'.`,
name: 'showUnderline?',
type: 'boolean',
}, {
description: `Event emitted after the [debounce] timeout.`,
name: 'searchDebounce',
type: 'function($event)',
}, {
description: `Event emitted after the key enter has been pressed.`,
name: 'search',
type: 'function($event)',
}, {
description: `Event emitted after the clear icon has been clicked.`,
name: 'clear',
type: 'function($event)',
}];

searchBoxAttrs: Object[] = [{
description: `Debounce timeout between keypresses. Defaults to 400.`,
name: 'debounce?',
type: 'number',
}, {
description: `Placeholder for the underlying input component.`,
name: 'placeholder?',
type: 'string',
}, {
description: `The icon used to close the search toggle, only shown when [alwaysVisible] is false.
Defaults to 'search' icon.`,
name: 'backIcon?',
type: 'string',
}, {
description: `Sets if the input underline should be visible. Defaults to 'false'.`,
name: 'showUnderline?',
type: 'boolean',
}, {
description: `Sets if the input should always be visible. Defaults to 'false'.`,
name: 'alwaysVisible?',
type: 'boolean',
}, {
description: `Event emitted after the [debounce] timeout.`,
name: 'searchDebounce',
type: 'function($event)',
}, {
description: `Event emitted after the key enter has been pressed.`,
name: 'search',
type: 'function($event)',
}, {
description: `Event emitted after the clear icon has been clicked.`,
name: 'clear',
type: 'function($event)',
}];

searchInputTerm: string = '';
searchBoxTerm: string = '';
debounce: number = 0;
alwaysVisible: boolean = false;

modeChange(): void {
this.searchInputTerm = '';
this.searchBoxTerm = '';
}

toggleAlwaysVisible(): void {
this.alwaysVisible = !this.alwaysVisible;
}

}
3 changes: 3 additions & 0 deletions src/platform/core/styles/_layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -568,4 +568,7 @@ $layout-breakpoint-lg: 1920px !default;
}
}

[flex="none"] {
flex: none;
}

69 changes: 69 additions & 0 deletions src/platform/search/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
# td-search-input

`td-search-input` element to generate a search input with its animated cancel button.

## API Summary

Properties:

| Name | Type | Description |
| --- | --- | --- |
| `debounce?` | `number` | Debounce timeout between keypresses. Defaults to 400.
| `placeholder?` | `string` | Placeholder for the underlying input component.
| `showUnderline?` | `boolean` | Sets if the input underline should be visible. Defaults to 'false'.
| `searchDebounce` | `function($event)` | Event emitted after the [debounce] timeout.
| `search` | `function($event)` | Event emitted after the key enter has been pressed.
| `clear?` | `function` | Event emitted after the clear icon has been clicked.

## Usage

Example for HTML usage:

```html
<td-search-input placeholder="Search here" [showUnderline]="false|true" [debounce]="500" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
</td-search-input>
```

# td-search-box

`td-search-box` element to generate a search box with animations.

## API Summary

Properties:

| Name | Type | Description |
| --- | --- | --- |
| `debounce?` | `number` | Debounce timeout between keypresses. Defaults to 400.
| `placeholder?` | `string` | Placeholder for the underlying input component.
| `backIcon?` | `string` | The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon.
| `showUnderline?` | `boolean` | Sets if the input underline should be visible. Defaults to 'false'.
| `alwaysVisible?` | `boolean` | Sets if the input should always be visible. Defaults to 'false'.
| `searchDebounce` | `function($event)` | Event emitted after the [debounce] timeout.
| `search` | `function($event)` | Event emitted after the key enter has been pressed.
| `clear?` | `function` | Event emitted after the clear icon has been clicked.

## Usage

Example for HTML usage:

```html
<td-search-box placeholder="Search here" [showUnderline]="false|true" [debounce]="500" [alwaysVisible]="false|true" (searchDebounce)="searchInputTerm = $event" (search)="searchInputTerm = $event" (clear)="searchInputTerm = ''">
</td-search-box>
```

## Setup

Import the [CovalentSearchModule] using the forRoot() method in your NgModule:

```typescript
import { CovalentSearchModule } from '@covalent/chips';
@NgModule({
imports: [
CovalentSearchModule.forRoot(),
...
],
...
})
export class MyModule {}
```
3 changes: 3 additions & 0 deletions src/platform/search/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { TdSearchBoxComponent } from './search-box/search-box.component';
export { TdSearchInputComponent } from './search-input/search-input.component';
export { CovalentSearchModule } from './search.module';
Loading

0 comments on commit 8783f60

Please sign in to comment.