From 8e18beb29c764d9ef749b4b1aa819264f3270376 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Fri, 5 Jan 2018 19:53:39 -0800 Subject: [PATCH] feat(docs): support list in pretty markdown to showcase API's better (#1073) also added example in chips README.md --- src/app/documentation-tools/index.ts | 6 ++- .../cfm-list/cfm-list.component.html | 13 +++++ .../cfm-list/cfm-list.component.scss | 0 .../cfm-list/cfm-list.component.ts | 19 +++++++ .../pretty-markdown.component.ts | 22 ++++++++ src/platform/core/chips/README.md | 52 ++++++++++++------- 6 files changed, 93 insertions(+), 19 deletions(-) create mode 100644 src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.html create mode 100644 src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.scss create mode 100644 src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.ts diff --git a/src/app/documentation-tools/index.ts b/src/app/documentation-tools/index.ts index 52a12cad29..6abd54bf4e 100644 --- a/src/app/documentation-tools/index.ts +++ b/src/app/documentation-tools/index.ts @@ -2,12 +2,14 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox'; +import { MatListModule } from '@angular/material/list'; import { MatCardModule } from '@angular/material/card'; import { CovalentDataTableModule, TdDataTableComponent } from '../../platform/core'; import { CovalentHighlightModule, TdHighlightComponent } from '../../platform/highlight'; import { CovalentMarkdownModule, TdMarkdownComponent } from '../../platform/markdown'; +import { TdFlavoredListComponent } from './pretty-markdown/cfm-list/cfm-list.component'; import { TdPrettyMarkdownComponent, TdPrettyMarkdownContainerDirective } from './pretty-markdown/pretty-markdown.component'; import { TdReadmeLoaderComponent } from './readme-loader/readme-loader.component'; @@ -16,11 +18,13 @@ import { TdReadmeLoaderComponent } from './readme-loader/readme-loader.component CommonModule, MatCardModule, MatCheckboxModule, + MatListModule, CovalentDataTableModule, CovalentHighlightModule, CovalentMarkdownModule, ], declarations: [ + TdFlavoredListComponent, TdPrettyMarkdownComponent, TdPrettyMarkdownContainerDirective, TdReadmeLoaderComponent, @@ -30,7 +34,7 @@ import { TdReadmeLoaderComponent } from './readme-loader/readme-loader.component TdPrettyMarkdownContainerDirective, TdReadmeLoaderComponent, ], - entryComponents: [ TdDataTableComponent, TdMarkdownComponent, TdHighlightComponent, MatCheckbox ], + entryComponents: [TdDataTableComponent, TdMarkdownComponent, TdHighlightComponent, MatCheckbox, TdFlavoredListComponent ], }) export class DocumentationToolsModule { } diff --git a/src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.html b/src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.html new file mode 100644 index 0000000000..03ad71b54e --- /dev/null +++ b/src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.html @@ -0,0 +1,13 @@ + + + +

+ {{line.line}} +

+

+ {{subline}} +

+ + + + diff --git a/src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.scss b/src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.ts b/src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.ts new file mode 100644 index 0000000000..3b80cd2fba --- /dev/null +++ b/src/app/documentation-tools/pretty-markdown/cfm-list/cfm-list.component.ts @@ -0,0 +1,19 @@ +import { + Component, + Input, +} from '@angular/core'; + +export interface IFlavoredListItem { + line: string; + sublines?: string[]; +} + +@Component({ + selector: 'cfm-list', + styleUrls: ['./cfm-list.component.scss'], + templateUrl: './cfm-list.component.html', +}) +export class TdFlavoredListComponent { + @Input() lines: IFlavoredListItem[]; + @Input() dense: boolean = false; +} diff --git a/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts b/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts index e76abf14c1..a950f7ee2b 100644 --- a/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts +++ b/src/app/documentation-tools/pretty-markdown/pretty-markdown.component.ts @@ -3,6 +3,7 @@ import { Component, Directive, AfterViewInit, ElementRef, Input, Renderer2, Secu import { DomSanitizer } from '@angular/platform-browser'; import { MatCheckbox } from '@angular/material/checkbox'; +import { TdFlavoredListComponent, IFlavoredListItem } from './cfm-list/cfm-list.component'; import { TdHighlightComponent } from '@covalent/highlight'; import { TdMarkdownComponent } from '@covalent/markdown'; import { TdDataTableComponent, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumnWidth } from '@covalent/core'; @@ -75,6 +76,7 @@ export class TdPrettyMarkdownComponent implements AfterViewInit { markdown = lines.join('\n'); markdown = this._replaceCheckbox(markdown); markdown = this._replaceTables(markdown); + markdown = this._replaceLists(markdown); markdown = this._replaceCodeBlocks(markdown); let keys: string[] = Object.keys(this._components); // need to sort the placeholders in order of encounter in markdown content @@ -204,4 +206,24 @@ export class TdPrettyMarkdownComponent implements AfterViewInit { }); }); } + + private _replaceLists(markdown: string): string { + let listRegExp: RegExp = /(?:^|\n)(( *\+)[ |\t](.*)\n)+/g; + return this._replaceComponent(markdown, TdFlavoredListComponent, listRegExp, + (componentRef: ComponentRef, match: string) => { + let lineTexts: string[] = match.split(new RegExp('\\n {' + (match.indexOf('+') - 1).toString() + '}\\+[ |\\t]')); + lineTexts.shift(); + let lines: IFlavoredListItem[] = []; + lineTexts.forEach((text: string, index: number) => { + let sublineTexts: string[] = text.split(/\n *\+ /); + lines.push({ + line: sublineTexts.shift(), + sublines: sublineTexts.map((subline: string) => { + return subline.trim(); + }), + }); + }); + componentRef.instance.lines = lines; + }); + } } diff --git a/src/platform/core/chips/README.md b/src/platform/core/chips/README.md index 277bd18102..c89bc6c0d0 100644 --- a/src/platform/core/chips/README.md +++ b/src/platform/core/chips/README.md @@ -8,25 +8,41 @@ Leverage the templates to create your own chip or contact chip. ## API Summary -Properties: +#### Inputs -| Name | Type | Description | -| --- | --- | 650--- | -| `color?` | `'primary', 'accent' or 'warn'` | color for the input and focus state of the chips. Defaults to 'primary' -| `items?` | `any[]` | Renders the `mat-autocomplete` with the provided list to display as options. -| `requireMatch?` | `boolean` | Blocks custom inputs and only allows selections from the autocomplete list. -| `stacked?` | `boolean` | Set stacked or horizontal chips depending on value. Defaults to false. -| `inputPosition?` | 'before' or 'after' | Set input position before or after the chips. Defaults to 'after'. -| `placeholder?` | `string` | Placeholder for the autocomplete input. -| `disabled?` | `boolean` | Sets disabled state and disabled addition/removal of chips. -| `chipAddition` | `boolean` | Disables the ability to add chips. When setting disabled as true, this will be overriden. Defaults to true. -| `chipRemoval` | `boolean` | Disables the ability to remove chips. When setting disabled as true, this will be overriden. Defaults to true. -| `debounce` | `string` | Debounce timeout between keypresses. Defaults to 200. -| `add?` | `function` | Method to be executed when a chip is added. Sends chip value as event. -| `remove?` | `function` | Method to be executed when a chip is removed. Sends chip value as event. -| `chipBlur?` | `function` | Method to be executed when a chip is blurred. Sends chip value as event. -| `chipFocus?` | `function` | Method to be executed when a chip is focused. Sends chip value as event. -| `inputChange?` | `function` | Method to be executed when the value in the autocomplete input changes. Sends string value as event. ++ color?: 'primary' | 'accent' | 'warn' + + color for the input and focus state of the chips. Defaults to 'primary' ++ items?: any[] + + Renders the `mat-autocomplete` with the provided list to display as options. ++ requireMatch?: boolean + + Blocks custom inputs and only allows selections from the autocomplete list. ++ stacked?: boolean + + Set stacked or horizontal chips depending on value. Defaults to false. ++ inputPosition?: before | after + + Set input position before or after the chips. Defaults to 'after'. ++ placeholder?: string + + Placeholder for the autocomplete input. ++ disabled?: boolean + + Sets disabled state and disabled addition/removal of chips. ++ chipAddition?: boolean + + Enables the ability to add chips. When setting disabled as true, this will be overriden. ++ chipRemoval?: boolean + + Enables the ability to remove chips. When setting disabled as true, this will be overriden. ++ debounce?: number + + Debounce timeout between keypresses. Defaults to 200. + +#### Events + ++ add?: function + + Method to be executed when a chip is added. Sends chip value as event. ++ remove?: function + + Method to be executed when a chip is removed. Sends chip value as event. ++ chipBlur?: function + + Method to be executed when a chip is blurred. Sends chip value as event. ++ chipFocus?: function + + Method to be executed when a chip is focused. Sends chip value as event. ++ inputChange?: function + + Method to be executed when the value in the autocomplete input changes. Sends string value as event. ## Setup