diff --git a/CHANGELOG.md b/CHANGELOG.md index f7ddec6..12fb8d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,11 +5,17 @@ All notable changes to this project will be documented in this file. - ... +## [0.1.6] - 2019-06-23 + +### Added + +- Proper `flex-cell` layout configuration when using forms via `withForm()`. It supports an optional `layout` property with options to configure `flexCell`, `gutter`, `growItems`, `debug`. + ## [0.1.5] - 2019-06-23 ### Changed -- `withForm()` renders fields within form tag with these attributes `flex-cell gutter default-cell-12` to support `layout` properties of form field definitions. +- `withForm()` renders fields within form tag with these attributes `flex-cell gutter default-cell-12` to support `layout` properties of form field definitions (quick hack, not ideal). ## [0.1.4] - 2019-06-21 diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts index 861b42e..c562174 100644 --- a/projects/demo/src/app/app.component.ts +++ b/projects/demo/src/app/app.component.ts @@ -72,8 +72,19 @@ export class AppComponent { doFormSimple () { this.dialogService.withForm( 'Form (Simple)', - [ { title: 'Name', required: true } ], - { content: 'Tell me something about yourself...' } + [ + { title: 'Name', required: true }, + { title: 'Email', required: true }, + { title: 'Address', type: 'textarea', required: true, layout: { cell: 8 } } + ], + { + content: 'Tell me something about yourself...', + layout: { + flexCell: true, + gutter: true, + growItems: true + } + } ).pipe( filter(result => result), concatMap(result => this.dialogService.withAlert( diff --git a/projects/demo/src/app/sourceCodeReference.ts b/projects/demo/src/app/sourceCodeReference.ts index 0283599..daa49b7 100644 --- a/projects/demo/src/app/sourceCodeReference.ts +++ b/projects/demo/src/app/sourceCodeReference.ts @@ -65,18 +65,29 @@ export const sourceCodeReference = { ' }\n' + ']\n', - formSimple: 'this.dialogService.withForm(\n' + - ' \'Form (Simple)\',\n' + - ' [ { title: \'Name\', required: true } ],\n' + - ' { content: \'Tell me something about yourself...\' }\n' + - ').pipe(\n' + - ' filter(result => result),\n' + - ' concatMap(result => this.dialogService.withAlert(\n' + - ' \'Hello!\',\n' + - ' {\n' + - ' content: JSON.stringify(result, null, 2)\n' + - ' }))\n' + - ').subscribe()\n', + formSimple: `this.dialogService.withForm( + 'Form (Simple)', + [ + { title: 'Name', required: true }, + { title: 'Email', required: true }, + { title: 'Address', type: 'textarea', required: true, layout: { cell: 8 } } + ], + { + content: 'Tell me something about yourself...', + layout: { + flexCell: true, + gutter: true, + growItems: true + } + } + ).pipe( + filter(result => result), + concatMap(result => this.dialogService.withAlert( + 'Hello!', + { + content: JSON.stringify(result, null, 2) + })) + ).subscribe()`, formMixed: 'this.dialogService.withForm(\'Form (Mixed with validators)\', this.fields).pipe(\n' + ' filter(result => result),\n' + diff --git a/projects/dialog-service/package.json b/projects/dialog-service/package.json index 9e65be4..c428614 100644 --- a/projects/dialog-service/package.json +++ b/projects/dialog-service/package.json @@ -1,6 +1,6 @@ { "name": "dialog-service", - "version": "0.1.5", + "version": "0.1.6", "description": "Reactive Angular modal dialogs. Create alert, confirmation, progress and form based dialogs without writing component templates.", "repository": { "type": "git", diff --git a/projects/dialog-service/src/lib/DialogService.ts b/projects/dialog-service/src/lib/DialogService.ts index 66150a2..aa5a160 100644 --- a/projects/dialog-service/src/lib/DialogService.ts +++ b/projects/dialog-service/src/lib/DialogService.ts @@ -85,7 +85,8 @@ export abstract class DialogService { * @param fields * @param options Dialog options. 'content' represents content to be display in dialog; * 'submitButton' represents label to submit form (defaults to 'Submit'); 'cancelButton' - * represents label to cancel form (defaults to 'Cancel') + * represents label to cancel form (defaults to 'Cancel'); 'layout' defines the form's "flex-cell" + * layout attributes; * @returns Observable with form value object on submission, or false if form was cancelled */ abstract withForm ( @@ -95,5 +96,11 @@ export abstract class DialogService { content?: string submitButton?: string cancelButton?: string + layout?: { + flexCell?: boolean | 6 | 12 + gutter?: boolean + growItems?: boolean + debug?: boolean + } }): Observable } diff --git a/projects/dialog-service/src/lib/MatDialogService.ts b/projects/dialog-service/src/lib/MatDialogService.ts index bbeb887..af42e04 100644 --- a/projects/dialog-service/src/lib/MatDialogService.ts +++ b/projects/dialog-service/src/lib/MatDialogService.ts @@ -76,6 +76,12 @@ export class MatDialogService extends DialogService { submitButton?: string cancelButton?: string cancelMessage?: string + layout?: { + flexCell?: boolean | 6 | 12 + gutter?: boolean + growItems?: boolean + debug?: boolean + } }): Observable { options = options || {} options.submitButton = options.submitButton || 'Submit' diff --git a/projects/dialog-service/src/lib/mat/Form.component.html b/projects/dialog-service/src/lib/mat/Form.component.html index 79a4e4a..47a1a92 100644 --- a/projects/dialog-service/src/lib/mat/Form.component.html +++ b/projects/dialog-service/src/lib/mat/Form.component.html @@ -1,10 +1,19 @@

{{data.title}}

-
- -
+
+
+ +
+