From 22c19db06cb5bb4ed150e033f3b94d571787b1a6 Mon Sep 17 00:00:00 2001 From: lskramarov Date: Thu, 28 Nov 2019 15:42:41 +0300 Subject: [PATCH] feat(docs): added examples for list and tree (#UIM-261, #UIM-270) (#352) --- .circleci/config.yml | 3 + .../documentation-items.ts | 19 ++ .../src/assets/stackblitz/mosaic-module.ts | 18 +- packages/mosaic-dev/tree/module.ts | 4 +- .../list-multiple-checkbox-example.css | 1 + .../list-multiple-checkbox-example.html | 16 ++ .../list-multiple-checkbox-example.ts | 14 ++ .../list-multiple-keyboard-example.css | 1 + .../list-multiple-keyboard-example.html | 16 ++ .../list-multiple-keyboard-example.ts | 14 ++ .../list-overview/list-overview-example.css | 1 + .../list-overview/list-overview-example.html | 15 ++ .../list-overview/list-overview-example.ts | 14 ++ .../mosaic-examples/mosaic/list/module.ts | 24 +++ .../mosaic-examples/mosaic/tree/module.ts | 34 ++++ .../tree-filtering/tree-filtering-example.css | 1 + .../tree-filtering-example.html | 21 +++ .../tree-filtering/tree-filtering-example.ts | 169 ++++++++++++++++++ .../tree-multiple-checkbox-example.css | 1 + .../tree-multiple-checkbox-example.html | 16 ++ .../tree-multiple-checkbox-example.ts | 164 +++++++++++++++++ .../tree-multiple-keyboard-example.css | 1 + .../tree-multiple-keyboard-example.html | 16 ++ .../tree-multiple-keyboard-example.ts | 165 +++++++++++++++++ .../tree-overview/tree-overview-example.css | 1 + .../tree-overview/tree-overview-example.html | 15 ++ .../tree-overview/tree-overview-example.ts | 164 +++++++++++++++++ packages/mosaic/list/list.md | 10 ++ packages/mosaic/tree/tree.md | 100 +---------- 29 files changed, 942 insertions(+), 96 deletions(-) create mode 100644 packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.css create mode 100644 packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.html create mode 100644 packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.ts create mode 100644 packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.css create mode 100644 packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.html create mode 100644 packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.ts create mode 100644 packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.css create mode 100644 packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.html create mode 100644 packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.ts create mode 100644 packages/mosaic-examples/mosaic/list/module.ts create mode 100644 packages/mosaic-examples/mosaic/tree/module.ts create mode 100644 packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.css create mode 100644 packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.html create mode 100644 packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.ts create mode 100644 packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.css create mode 100644 packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.html create mode 100644 packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.ts create mode 100644 packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.css create mode 100644 packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.html create mode 100644 packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.ts create mode 100644 packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.css create mode 100644 packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.html create mode 100644 packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.ts create mode 100644 packages/mosaic/list/list.md diff --git a/.circleci/config.yml b/.circleci/config.yml index e4a1f3de0..285325d91 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -72,6 +72,8 @@ jobs: echo 'export SHORT_GIT_HASH=$(git rev-parse --short $CIRCLE_SHA1)' >> $BASH_ENV echo 'export CIRCLE_PULL_REQUEST_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | cut -d"/" -f7)' >> $BASH_ENV source $BASH_ENV + - run: echo "$CIRCLE_PULL_REQUEST" | cut -d"/" -f7 && echo $CIRCLE_PULL_REQUEST_NUMBER + - run: printenv - run: yarn run build:docs - run: yarn run build:mosaic-examples - run: yarn run docs:prod-build --progress false --base-href /mosaic-previews/pr$CIRCLE_PULL_REQUEST_NUMBER-$SHORT_GIT_HASH/ --output-path dist/releases/mosaic-docs/pr$CIRCLE_PULL_REQUEST_NUMBER-$SHORT_GIT_HASH/ @@ -160,6 +162,7 @@ jobs: echo 'export SHORT_GIT_HASH=$(git rev-parse --short $CIRCLE_SHA1)' >> $BASH_ENV echo 'export CIRCLE_PULL_REQUEST_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | cut -d"/" -f7)' >> $BASH_ENV source $BASH_ENV + - run: printenv - run: yarn run build:docs - run: yarn run docs:publish-preview diff --git a/packages/docs/src/app/shared/documentation-items/documentation-items.ts b/packages/docs/src/app/shared/documentation-items/documentation-items.ts index a08ebe793..b00e1d8a9 100644 --- a/packages/docs/src/app/shared/documentation-items/documentation-items.ts +++ b/packages/docs/src/app/shared/documentation-items/documentation-items.ts @@ -178,6 +178,25 @@ const DOCS: { [key: string]: DocCategory[] } = { examples: ['typography-types'] } ] + }, + { + id: 'core/styles', + name: 'Data list', + summary: 'styles', + items: [ + { + id: 'list', + name: 'List', + summary: '', + examples: ['list-types'] + }, + { + id: 'tree', + name: 'Tree', + summary: '', + examples: ['tree-types'] + } + ] } ], [CDK]: [ diff --git a/packages/docs/src/assets/stackblitz/mosaic-module.ts b/packages/docs/src/assets/stackblitz/mosaic-module.ts index 76aa6c93e..359ad926c 100644 --- a/packages/docs/src/assets/stackblitz/mosaic-module.ts +++ b/packages/docs/src/assets/stackblitz/mosaic-module.ts @@ -1,14 +1,19 @@ import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CdkTreeModule } from '@ptsecurity/cdk/tree'; import { McMomentDateModule } from '@ptsecurity/mosaic-moment-adapter'; import { McButtonModule } from '@ptsecurity/mosaic/button'; import { McCheckboxModule } from '@ptsecurity/mosaic/checkbox'; +import { McHighlightModule, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core'; import { McDatepickerModule } from '@ptsecurity/mosaic/datepicker'; import { McFormFieldModule } from '@ptsecurity/mosaic/form-field'; import { McIconModule } from '@ptsecurity/mosaic/icon'; import { McInputModule } from '@ptsecurity/mosaic/input'; +import { McListModule } from '@ptsecurity/mosaic/list'; import { McRadioModule } from '@ptsecurity/mosaic/radio'; import { McSelectModule } from '@ptsecurity/mosaic/select'; import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker'; +import { McTreeModule } from '@ptsecurity/mosaic/tree'; @NgModule({ @@ -22,8 +27,15 @@ import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker'; McInputModule, McRadioModule, McTimepickerModule, - McSelectModule + McSelectModule, + McListModule, + McTreeModule, + McIconModule, + McHighlightModule, + FormsModule, + McInputModule, + McPseudoCheckboxModule, + CdkTreeModule ] }) -export class DemoMosaicModule { -} +export class DemoMosaicModule {} diff --git a/packages/mosaic-dev/tree/module.ts b/packages/mosaic-dev/tree/module.ts index 9d89dbd25..ecd7eec6a 100644 --- a/packages/mosaic-dev/tree/module.ts +++ b/packages/mosaic-dev/tree/module.ts @@ -173,7 +173,9 @@ export class DemoComponent { } private getViewValue = (node: FileNode): string => { - return `${node.name} view`; + const nodeType = node.type ? `.${node.type}` : ''; + + return `${node.name}${nodeType}`; } } diff --git a/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.css b/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.html b/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.html new file mode 100644 index 000000000..2333609b1 --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.html @@ -0,0 +1,16 @@ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + +
+
Selected: {{ selected }}
diff --git a/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.ts b/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.ts new file mode 100644 index 000000000..d30035eed --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-multiple-checkbox/list-multiple-checkbox-example.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + + +/** + * @title Basic list + */ +@Component({ + selector: 'list-multiple-checkbox-example', + templateUrl: 'list-multiple-checkbox-example.html', + styleUrls: ['list-multiple-checkbox-example.css'] +}) +export class ListMultipleCheckboxExample { + selected = []; +} diff --git a/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.css b/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.html b/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.html new file mode 100644 index 000000000..c20e40c74 --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.html @@ -0,0 +1,16 @@ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + +
+
Selected: {{ selected }}
diff --git a/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.ts b/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.ts new file mode 100644 index 000000000..3655ac2a7 --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-multiple-keyboard/list-multiple-keyboard-example.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + + +/** + * @title Basic list + */ +@Component({ + selector: 'list-multiple-keyboard-example', + templateUrl: 'list-multiple-keyboard-example.html', + styleUrls: ['list-multiple-keyboard-example.css'] +}) +export class ListMultipleKeyboardExample { + selected = []; +} diff --git a/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.css b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.html b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.html new file mode 100644 index 000000000..dd2a07dc1 --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.html @@ -0,0 +1,15 @@ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + +
+
Selected: {{ selected }}
diff --git a/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.ts b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.ts new file mode 100644 index 000000000..2edf8d89e --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/list-overview/list-overview-example.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + + +/** + * @title Basic list + */ +@Component({ + selector: 'list-overview-example', + templateUrl: 'list-overview-example.html', + styleUrls: ['list-overview-example.css'] +}) +export class ListOverviewExample { + selected = []; +} diff --git a/packages/mosaic-examples/mosaic/list/module.ts b/packages/mosaic-examples/mosaic/list/module.ts new file mode 100644 index 000000000..cb45278dc --- /dev/null +++ b/packages/mosaic-examples/mosaic/list/module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { McListModule } from '@ptsecurity/mosaic/list'; + +import { ListMultipleCheckboxExample } from './list-multiple-checkbox/list-multiple-checkbox-example'; +import { ListMultipleKeyboardExample } from './list-multiple-keyboard/list-multiple-keyboard-example'; +import { ListOverviewExample } from './list-overview/list-overview-example'; + + +const EXAMPLES = [ + ListOverviewExample, + ListMultipleCheckboxExample, + ListMultipleKeyboardExample +]; + +@NgModule({ + imports: [ + FormsModule, + McListModule + ], + declarations: EXAMPLES, + exports: EXAMPLES +}) +export class ListExamplesModule {} diff --git a/packages/mosaic-examples/mosaic/tree/module.ts b/packages/mosaic-examples/mosaic/tree/module.ts new file mode 100644 index 000000000..d35d84e3f --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/module.ts @@ -0,0 +1,34 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { McHighlightModule } from '@ptsecurity/mosaic/core'; +import { McFormFieldModule } from '@ptsecurity/mosaic/form-field'; +import { McIconModule } from '@ptsecurity/mosaic/icon'; +import { McInputModule } from '@ptsecurity/mosaic/input'; +import { McTreeModule } from '@ptsecurity/mosaic/tree'; + +import { TreeFilteringExample } from './tree-filtering/tree-filtering-example'; +import { TreeMultipleCheckboxExample } from './tree-multiple-checkbox/tree-multiple-checkbox-example'; +import { TreeMultipleKeyboardExample } from './tree-multiple-keyboard/tree-multiple-keyboard-example'; +import { TreeOverviewExample } from './tree-overview/tree-overview-example'; + + +const EXAMPLES = [ + TreeOverviewExample, + TreeMultipleCheckboxExample, + TreeMultipleKeyboardExample, + TreeFilteringExample +]; + +@NgModule({ + imports: [ + FormsModule, + McFormFieldModule, + McInputModule, + McTreeModule, + McIconModule, + McHighlightModule + ], + declarations: EXAMPLES, + exports: EXAMPLES +}) +export class TreeExamplesModule {} diff --git a/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.css b/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.html b/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.html new file mode 100644 index 000000000..3741583f9 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.html @@ -0,0 +1,21 @@ + + + + +


+ + + + + + + + + + + + + diff --git a/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.ts b/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.ts new file mode 100644 index 000000000..14bd9687f --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-filtering/tree-filtering-example.ts @@ -0,0 +1,169 @@ +/* tslint:disable:no-reserved-keywords object-literal-key-quotes */ +import { Component } from '@angular/core'; +import { FlatTreeControl } from '@ptsecurity/cdk/tree'; +import { McTreeFlatDataSource, McTreeFlattener } from '@ptsecurity/mosaic/tree'; + + +export class FileNode { + children: FileNode[]; + name: string; + type: any; +} + +/** Flat node with expandable and level information */ +export class FileFlatNode { + name: string; + type: any; + level: number; + expandable: boolean; + parent: any; +} + +/** + * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. + * The return value is the list of `FileNode`. + */ +export function buildFileTree(value: any, level: number): FileNode[] { + const data: any[] = []; + + for (const k of Object.keys(value)) { + const v = value[k]; + const node = new FileNode(); + + node.name = `${k}`; + + if (v === null || v === undefined) { + // no action + } else if (typeof v === 'object') { + node.children = buildFileTree(v, level + 1); + } else { + node.type = v; + } + + data.push(node); + } + + return data; +} + +export const DATA_OBJECT = { + docs: 'app', + src: { + cdk: { + a11ly: { + 'aria-describer': { + 'aria-describer': 'ts', + 'aria-describer.spec': 'ts', + 'aria-reference': 'ts', + 'aria-reference.spec': 'ts' + }, + 'focus-monitor': { + 'focus-monitor': 'ts', + 'focus-monitor.spec': 'ts' + } + } + }, + documentation: { + source: '', + tools: '' + }, + mosaic: { + autocomplete: '', + button: '', + 'button-toggle': '', + index: 'ts', + package: 'json', + version: 'ts' + }, + 'mosaic-dev': { + alert: '', + badge: '' + }, + 'mosaic-examples': '', + 'mosaic-moment-adapter': '', + README: 'md', + 'tsconfig.build': 'json', + 'wallabyTest': 'ts' + }, + scripts: { + deploy: { + 'cleanup-preview': 'ts', + 'publish-artifacts': 'sh', + 'publish-docs': 'sh', + 'publish-docs-preview': 'ts' + }, + 'tsconfig.deploy': 'json' + }, + tests: '' +}; + +/** + * @title Basic tree + */ +@Component({ + selector: 'tree-filtering-example', + templateUrl: 'tree-filtering-example.html', + styleUrls: ['tree-filtering-example.css'] +}) +export class TreeFilteringExample { + treeControl: FlatTreeControl; + treeFlattener: McTreeFlattener; + + dataSource: McTreeFlatDataSource; + + modelValue: any = ''; + filterValue: string = ''; + + constructor() { + this.treeFlattener = new McTreeFlattener( + this.transformer, this.getLevel, this.isExpandable, this.getChildren + ); + + this.treeControl = new FlatTreeControl( + this.getLevel, this.isExpandable, this.getValue, this.getViewValue + ); + this.dataSource = new McTreeFlatDataSource(this.treeControl, this.treeFlattener); + + this.dataSource.data = buildFileTree(DATA_OBJECT, 0); + } + + onFilterChange(value: string): void { + this.treeControl.filterNodes(value); + } + + hasChild(_: number, nodeData: FileFlatNode) { return nodeData.expandable; } + + private transformer = (node: FileNode, level: number, parent: any) => { + const flatNode = new FileFlatNode(); + + flatNode.name = node.name; + flatNode.parent = parent; + flatNode.type = node.type; + flatNode.level = level; + flatNode.expandable = !!node.children; + + return flatNode; + } + + private getLevel = (node: FileFlatNode) => { + return node.level; + } + + private isExpandable = (node: FileFlatNode) => { + return node.expandable; + } + + private getChildren = (node: FileNode): FileNode[] => { + return node.children; + } + + private getValue = (node: FileNode): string => { + return node.name; + } + + private getViewValue = (node: FileNode): string => { + const nodeType = node.type ? `.${node.type}` : ''; + + return `${node.name}${nodeType}`; + } +} diff --git a/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.css b/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.html b/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.html new file mode 100644 index 000000000..6dc9a9145 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.html @@ -0,0 +1,16 @@ + + + + + + + + + + + + diff --git a/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.ts b/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.ts new file mode 100644 index 000000000..504da1768 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-multiple-checkbox/tree-multiple-checkbox-example.ts @@ -0,0 +1,164 @@ +/* tslint:disable:no-reserved-keywords object-literal-key-quotes */ +import { Component } from '@angular/core'; +import { FlatTreeControl } from '@ptsecurity/cdk/tree'; +import { McTreeFlatDataSource, McTreeFlattener } from '@ptsecurity/mosaic/tree'; + + +export class FileNode { + children: FileNode[]; + name: string; + type: any; +} + +/** Flat node with expandable and level information */ +export class FileFlatNode { + name: string; + type: any; + level: number; + expandable: boolean; + parent: any; +} + +/** + * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. + * The return value is the list of `FileNode`. + */ +export function buildFileTree(value: any, level: number): FileNode[] { + const data: any[] = []; + + for (const k of Object.keys(value)) { + const v = value[k]; + const node = new FileNode(); + + node.name = `${k}`; + + if (v === null || v === undefined) { + // no action + } else if (typeof v === 'object') { + node.children = buildFileTree(v, level + 1); + } else { + node.type = v; + } + + data.push(node); + } + + return data; +} + +export const DATA_OBJECT = { + docs: 'app', + src: { + cdk: { + a11ly: { + 'aria-describer': { + 'aria-describer': 'ts', + 'aria-describer.spec': 'ts', + 'aria-reference': 'ts', + 'aria-reference.spec': 'ts' + }, + 'focus-monitor': { + 'focus-monitor': 'ts', + 'focus-monitor.spec': 'ts' + } + } + }, + documentation: { + source: '', + tools: '' + }, + mosaic: { + autocomplete: '', + button: '', + 'button-toggle': '', + index: 'ts', + package: 'json', + version: 'ts' + }, + 'mosaic-dev': { + alert: '', + badge: '' + }, + 'mosaic-examples': '', + 'mosaic-moment-adapter': '', + README: 'md', + 'tsconfig.build': 'json', + 'wallabyTest': 'ts' + }, + scripts: { + deploy: { + 'cleanup-preview': 'ts', + 'publish-artifacts': 'sh', + 'publish-docs': 'sh', + 'publish-docs-preview': 'ts' + }, + 'tsconfig.deploy': 'json' + }, + tests: '' +}; + +/** + * @title Basic tree + */ +@Component({ + selector: 'tree-multiple-checkbox-example', + templateUrl: 'tree-multiple-checkbox-example.html', + styleUrls: ['tree-multiple-checkbox-example.css'] +}) +export class TreeMultipleCheckboxExample { + treeControl: FlatTreeControl; + treeFlattener: McTreeFlattener; + + dataSource: McTreeFlatDataSource; + + modelValue: any = []; + + constructor() { + this.treeFlattener = new McTreeFlattener( + this.transformer, this.getLevel, this.isExpandable, this.getChildren + ); + + this.treeControl = new FlatTreeControl( + this.getLevel, this.isExpandable, this.getValue, this.getViewValue + ); + this.dataSource = new McTreeFlatDataSource(this.treeControl, this.treeFlattener); + + this.dataSource.data = buildFileTree(DATA_OBJECT, 0); + } + + hasChild(_: number, nodeData: FileFlatNode) { return nodeData.expandable; } + + private transformer = (node: FileNode, level: number, parent: any) => { + const flatNode = new FileFlatNode(); + + flatNode.name = node.name; + flatNode.parent = parent; + flatNode.type = node.type; + flatNode.level = level; + flatNode.expandable = !!node.children; + + return flatNode; + } + + private getLevel = (node: FileFlatNode) => { + return node.level; + } + + private isExpandable = (node: FileFlatNode) => { + return node.expandable; + } + + private getChildren = (node: FileNode): FileNode[] => { + return node.children; + } + + private getValue = (node: FileNode): string => { + return node.name; + } + + private getViewValue = (node: FileNode): string => { + const nodeType = node.type ? `.${node.type}` : ''; + + return `${node.name}${nodeType}`; + } +} diff --git a/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.css b/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.html b/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.html new file mode 100644 index 000000000..ec25f37f7 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.html @@ -0,0 +1,16 @@ + + + + + + + + + + + + diff --git a/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.ts b/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.ts new file mode 100644 index 000000000..cfb483b5f --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-multiple-keyboard/tree-multiple-keyboard-example.ts @@ -0,0 +1,165 @@ +/* tslint:disable:no-reserved-keywords object-literal-key-quotes */ +import { Component } from '@angular/core'; +import { FlatTreeControl } from '@ptsecurity/cdk/tree'; +import { McTreeFlatDataSource, McTreeFlattener } from '@ptsecurity/mosaic/tree'; + + +export class FileNode { + children: FileNode[]; + name: string; + type: any; +} + +/** Flat node with expandable and level information */ +export class FileFlatNode { + name: string; + type: any; + level: number; + expandable: boolean; + parent: any; +} + +/** + * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. + * The return value is the list of `FileNode`. + */ +export function buildFileTree(value: any, level: number): FileNode[] { + const data: any[] = []; + + for (const k of Object.keys(value)) { + const v = value[k]; + const node = new FileNode(); + + node.name = `${k}`; + + if (v === null || v === undefined) { + // no action + } else if (typeof v === 'object') { + node.children = buildFileTree(v, level + 1); + } else { + node.type = v; + } + + data.push(node); + } + + return data; +} + +export const DATA_OBJECT = { + docs: 'app', + src: { + cdk: { + a11ly: { + 'aria-describer': { + 'aria-describer': 'ts', + 'aria-describer.spec': 'ts', + 'aria-reference': 'ts', + 'aria-reference.spec': 'ts' + }, + 'focus-monitor': { + 'focus-monitor': 'ts', + 'focus-monitor.spec': 'ts' + } + } + }, + documentation: { + source: '', + tools: '' + }, + mosaic: { + autocomplete: '', + button: '', + 'button-toggle': '', + index: 'ts', + package: 'json', + version: 'ts' + }, + 'mosaic-dev': { + alert: '', + badge: '' + }, + 'mosaic-examples': '', + 'mosaic-moment-adapter': '', + README: 'md', + 'tsconfig.build': 'json', + 'wallabyTest': 'ts' + }, + scripts: { + deploy: { + 'cleanup-preview': 'ts', + 'publish-artifacts': 'sh', + 'publish-docs': 'sh', + 'publish-docs-preview': 'ts' + }, + 'tsconfig.deploy': 'json' + }, + tests: '' +}; + +/** + * @title Basic tree + */ +@Component({ + selector: 'tree-multiple-keyboard-example', + templateUrl: 'tree-multiple-keyboard-example.html', + styleUrls: ['tree-multiple-keyboard-example.css'] +}) +export class TreeMultipleKeyboardExample { + treeControl: FlatTreeControl; + treeFlattener: McTreeFlattener; + + dataSource: McTreeFlatDataSource; + + modelValue: any = []; + + constructor() { + this.treeFlattener = new McTreeFlattener( + this.transformer, this.getLevel, this.isExpandable, this.getChildren + ); + + this.treeControl = new FlatTreeControl( + this.getLevel, this.isExpandable, this.getValue, this.getViewValue + ); + this.dataSource = new McTreeFlatDataSource(this.treeControl, this.treeFlattener); + + this.dataSource.data = buildFileTree(DATA_OBJECT, 0); + } + + hasChild(_: number, nodeData: FileFlatNode) { return nodeData.expandable; } + + private transformer = (node: FileNode, level: number, parent: any) => { + const flatNode = new FileFlatNode(); + + flatNode.name = node.name; + flatNode.parent = parent; + flatNode.type = node.type; + flatNode.level = level; + flatNode.expandable = !!node.children; + + return flatNode; + } + + private getLevel = (node: FileFlatNode) => { + return node.level; + } + + private isExpandable = (node: FileFlatNode) => { + return node.expandable; + } + + private getChildren = (node: FileNode): FileNode[] => { + return node.children; + } + + private getValue = (node: FileNode): string => { + return node.name; + } + + private getViewValue = (node: FileNode): string => { + const nodeType = node.type ? `.${node.type}` : ''; + + return `${node.name}${nodeType}`; + } +} + diff --git a/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.css b/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.css new file mode 100644 index 000000000..743230875 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.html b/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.html new file mode 100644 index 000000000..7f7b48bc7 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.ts b/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.ts new file mode 100644 index 000000000..e89de55a6 --- /dev/null +++ b/packages/mosaic-examples/mosaic/tree/tree-overview/tree-overview-example.ts @@ -0,0 +1,164 @@ +/* tslint:disable:no-reserved-keywords object-literal-key-quotes */ +import { Component } from '@angular/core'; +import { FlatTreeControl } from '@ptsecurity/cdk/tree'; +import { McTreeFlatDataSource, McTreeFlattener } from '@ptsecurity/mosaic/tree'; + + +export class FileNode { + children: FileNode[]; + name: string; + type: any; +} + +/** Flat node with expandable and level information */ +export class FileFlatNode { + name: string; + type: any; + level: number; + expandable: boolean; + parent: any; +} + +/** + * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. + * The return value is the list of `FileNode`. + */ +export function buildFileTree(value: any, level: number): FileNode[] { + const data: any[] = []; + + for (const k of Object.keys(value)) { + const v = value[k]; + const node = new FileNode(); + + node.name = `${k}`; + + if (v === null || v === undefined) { + // no action + } else if (typeof v === 'object') { + node.children = buildFileTree(v, level + 1); + } else { + node.type = v; + } + + data.push(node); + } + + return data; +} + +export const DATA_OBJECT = { + docs: 'app', + src: { + cdk: { + a11ly: { + 'aria-describer': { + 'aria-describer': 'ts', + 'aria-describer.spec': 'ts', + 'aria-reference': 'ts', + 'aria-reference.spec': 'ts' + }, + 'focus-monitor': { + 'focus-monitor': 'ts', + 'focus-monitor.spec': 'ts' + } + } + }, + documentation: { + source: '', + tools: '' + }, + mosaic: { + autocomplete: '', + button: '', + 'button-toggle': '', + index: 'ts', + package: 'json', + version: 'ts' + }, + 'mosaic-dev': { + alert: '', + badge: '' + }, + 'mosaic-examples': '', + 'mosaic-moment-adapter': '', + README: 'md', + 'tsconfig.build': 'json', + 'wallabyTest': 'ts' + }, + scripts: { + deploy: { + 'cleanup-preview': 'ts', + 'publish-artifacts': 'sh', + 'publish-docs': 'sh', + 'publish-docs-preview': 'ts' + }, + 'tsconfig.deploy': 'json' + }, + tests: '' +}; + +/** + * @title Basic tree + */ +@Component({ + selector: 'tree-overview-example', + templateUrl: 'tree-overview-example.html', + styleUrls: ['tree-overview-example.css'] +}) +export class TreeOverviewExample { + treeControl: FlatTreeControl; + treeFlattener: McTreeFlattener; + + dataSource: McTreeFlatDataSource; + + modelValue: any = ''; + + constructor() { + this.treeFlattener = new McTreeFlattener( + this.transformer, this.getLevel, this.isExpandable, this.getChildren + ); + + this.treeControl = new FlatTreeControl( + this.getLevel, this.isExpandable, this.getValue, this.getViewValue + ); + this.dataSource = new McTreeFlatDataSource(this.treeControl, this.treeFlattener); + + this.dataSource.data = buildFileTree(DATA_OBJECT, 0); + } + + hasChild(_: number, nodeData: FileFlatNode) { return nodeData.expandable; } + + private transformer = (node: FileNode, level: number, parent: any) => { + const flatNode = new FileFlatNode(); + + flatNode.name = node.name; + flatNode.parent = parent; + flatNode.type = node.type; + flatNode.level = level; + flatNode.expandable = !!node.children; + + return flatNode; + } + + private getLevel = (node: FileFlatNode) => { + return node.level; + } + + private isExpandable = (node: FileFlatNode) => { + return node.expandable; + } + + private getChildren = (node: FileNode): FileNode[] => { + return node.children; + } + + private getValue = (node: FileNode): string => { + return node.name; + } + + private getViewValue = (node: FileNode): string => { + const nodeType = node.type ? `.${node.type}` : ''; + + return `${node.name}${nodeType}`; + } +} diff --git a/packages/mosaic/list/list.md b/packages/mosaic/list/list.md new file mode 100644 index 000000000..ead288d0e --- /dev/null +++ b/packages/mosaic/list/list.md @@ -0,0 +1,10 @@ +#### With default parameters (autoselect="true", no-unselect="true") + + + +### Multiple mode with checkboxes + + + +### Multiple mode without checkboxes + \ No newline at end of file diff --git a/packages/mosaic/tree/tree.md b/packages/mosaic/tree/tree.md index 25d6bd1ca..ac65da058 100644 --- a/packages/mosaic/tree/tree.md +++ b/packages/mosaic/tree/tree.md @@ -1,95 +1,11 @@ -The `mc-tree` provides a styled tree that can be used to display hierarchy -data. +#### With default parameters (autoselect="true", no-unselect="true") + -This tree builds on the foundation of the CDK tree and uses a similar interface for its -data source input and template, except that its element and attribute selectors will be prefixed -with `mc-` instead of `cdk-`. +### Multiple mode with checkboxes + -There are two types of trees: Flat tree and nested tree. The DOM structures are different for these -two types of trees. +### Multiple mode without checkboxes + -#### Flat tree -In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, -but instead are rendered as siblings in sequence. An instance of `TreeFlattener` is -used to generate the flat list of items from hierarchical data. The "level" of each tree -node is read through the `getLevel` method of the `TreeControl`; this level can be -used to style the node such that it is indented to the appropriate level. - - -```html - - parent node - -- child node1 - -- child node2 - -``` - - - -Flat trees are generally easier to style and inspect. They are also more friendly to -scrolling variations, such as infinite or virtual scrolling - - - -#### Nested tree -In Nested tree, children nodes are placed inside their parent node in DOM. The parent node has an -outlet to keep all the children nodes. - -```html - - - parent node - -- child node1 - -- child node2 - - -``` - - - -Nested trees are easier to work with when hierarchical relationships are visually -represented in ways that would be difficult to accomplish with flat nodes. - - - -### Features - -The `` itself only deals with the rendering of a tree structure. -Additional features can be built on top of the tree by adding behavior inside node templates -(e.g., padding and toggle). Interactions that affect the -rendered data (such as expand/collapse) should be propagated through the table's data source. - -### TreeControl - -The `TreeControl` controls the expand/collapse state of tree nodes. Users can expand/collapse a tree -node recursively through tree control. For nested tree node, `getChildren` function need to pass to -the `NestedTreeControl` to make it work recursively. For flattened tree node, `getLevel` and -`isExpandable` functions need to pass to the `FlatTreeControl` to make it work recursively. - -### Toggle - -A `mcTreeNodeToggle` can be added in the tree node template to expand/collapse the tree node. The -toggle toggles the expand/collapse functions in `TreeControl` and is able to expand/collapse a -tree node recursively by setting `[mсTreeNodeToggleRecursive]` to `true`. - -The toggle can be placed anywhere in the tree node, and is only toggled by `click` action. - - -### Padding (Flat tree only) - -The `mcTreeNodePadding` can be placed in a flat tree's node template to display the `level` -information of a flat tree node. - -Nested tree does not need this padding since padding can be easily added to the hierarchy -structure in DOM. - - -### Accessibility -Trees without text or labels should be given a meaningful label via `aria-label` or -`aria-labelledby`. The `aria-readonly` defaults to `true` if it's not set. - -Tree's role is `tree`. -Parent nodes are given `role="group"`, while leaf nodes are given `role="treeitem"` - -`mc-tree` does not manage any focus/keyboard interaction on its own. Users can add desired -focus/keyboard interactions in their application. +### Filtration + \ No newline at end of file