feat(dialog): initial commit for dialog (#74)

* feat(dialog): initial commit for `dialog`

.package.conf.yml

@@ -25,3 +25,4 @@ components:
   '@alyle/ui/list': list
   '@alyle/ui/divider': divider
   '@alyle/ui/select': select
+  '@alyle/ui/dialog': dialog

.prerender.conf.json

@@ -29,6 +29,7 @@
     "components/avatar",
     "components/list",
     "components/divider",
-    "components/select"
+    "components/select",
+    "components/dialog"
   ]
 }

README.md

@@ -28,6 +28,7 @@
 |card|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/card)|
 |carousel|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/carousel)|
 |checkbox|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/checkbox)|
+|dialog|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/dialog)|
 |divider|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/divider)|
 |drawer|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/drawer)|
 |field|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/field)|

src/app/app-bar/app-bar.component.ts

@@ -8,7 +8,11 @@ import { AppComponent } from '../app.component';
 
 const styles = (theme: ThemeVariables) => ({
   root: {
-    transition: `all 350ms ${theme.animations.curves.standard}`
+    transition: `350ms ${theme.animations.curves.standard}`,
+    transitionProperty: 'background, color',
+    width: '100vw',
+    paddingRight: '32px',
+    left: 0
   },
   themePickerText: {
     paddingBefore: '8px'

src/app/demo-view/view/view.component.html

@@ -2,7 +2,6 @@
   [elevation]="8"
   shadowColor="demoBg"
   bg="background:tertiary"
-  scrollable
 >
   <div [className]="classes.code">
     <button ly-button appearance="icon" (click)="toggleCode()" [lyTooltip]="'View source'"><ly-icon icon="code"></ly-icon></button>
@@ -14,6 +13,7 @@
       [textColor]="'primary'"
       [elevation]="8"
       [shadowColor]="'demoBg'"
+      scrollable
     >
       <ly-tab *ngFor="let file of files; let i = index">
         <button ly-tab-label>{{ file.label }}</button>

src/app/demo-view/view/view.component.ts

@@ -51,6 +51,13 @@ const styles = () => ({
   }
 });
 
+interface Demos {
+  path?: string;
+  label: string;
+  type?: string;
+  ext?: string;
+}
+
 @Component({
   selector: 'demo-view',
   templateUrl: './view.component.html',
@@ -63,13 +70,24 @@ export class ViewComponent implements OnInit {
   name: string;
   folderName: string;
   demos: {label: string, url: string, ext: string}[] = [];
-  files = [
+  files: Demos[] = [
     {label: 'Template', type: 'component', ext: 'html'},
     {label: 'Component', type: 'component', ext: 'ts'},
     {label: 'Module', type: 'module', ext: 'ts'}
   ];
   @Input() viewLabel: string;
   @Input() path: string;
+  @Input()
+  set extraPaths(val: string[]) {
+    val.forEach(item => {
+      this.files.push({
+        label: item,
+        path: item,
+        ext: getLanguage(item)
+      });
+    });
+    this.files.push();
+  }
   constructor(
     renderer: Renderer2,
     private http: HttpClient,
@@ -98,21 +116,26 @@ export class ViewComponent implements OnInit {
   }
 
   url(index: number) {
-    const fileName = this.path.split('/').reverse()[0];
-    const host = `${isDevMode() ? HOST_DEV : HOST_PROD}${this.path}`;
     const file = this.files[index];
+    const host = `${isDevMode() ? HOST_DEV : HOST_PROD}${this.path}`;
+    if (file.path) {
+      return `${host}/${file.path}`;
+    }
+    const fileName = this.path.split('/').reverse()[0];
     return `${host}/${fileName}.${file.type}.${file.ext}`;
   }
 
   openPostStackblitz() {
     const win = window.open('about:blank', '_blank')!;
     win.document.write('Loading...');
+    const urls = this.files
+    .map((_item, index) => this.url(index))
+    .map(_ => this.http.get(_, { responseType: 'text' }));
     const data = forkJoin(
-      this.http.get(this.url(0), { responseType: 'text' }),
-      this.http.get(this.url(1), { responseType: 'text' }),
-      this.http.get(this.url(2), { responseType: 'text' }),
+      ...urls
     );
-    data.subscribe(([res1, res2, res3]) => {
+    data.subscribe(([res1, res2, res3, ...others]) => {
+      console.log(others);
       const otherModules = `/** Angular */
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -174,14 +197,14 @@ export class GlobalVariables {
       });
 
       const appComponentTs = res2.replace(SELECTOR_REGEXP, (str, token) => str.replace(token, SELECTOR_APP));
-      const form = this.makeForm([res1, appComponentTs, AppModule], moduleName!);
+      const form = this.makeForm([res1, appComponentTs, AppModule, ...others], moduleName!);
       win.document.body.appendChild(form);
       form.submit();
       win.document.close();
     });
   }
 
-  makeForm([res1, res2, res3], moduleName: string) {
+  makeForm([res1, res2, res3, ...others], moduleName: string) {
     const form = document.createElement('form');
     form.method = 'POST';
     form.setAttribute('style', 'display:none;');
@@ -262,6 +285,11 @@ export class GlobalVariables {
       }
     };
 
+    others.forEach((text, index) => {
+      const filePath = `app/${this.files[index + 3].path!}`;
+      payload.files[filePath] = text;
+    });
+
     for (const key in payload) {
       if (payload.hasOwnProperty(key)) {
         let input;
@@ -314,3 +342,7 @@ export class GlobalVariables {
   }
 
 }
+
+function getLanguage(str: string) {
+  return str.split(/\./).reverse()[0];
+}

src/app/docs/components/dialog-demo/basic-dialog/basic-dialog.component.html

@@ -0,0 +1 @@
+<button ly-button (click)="open()">open</button>

src/app/docs/components/dialog-demo/basic-dialog/basic-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicDialogComponent } from './basic-dialog.component';
+
+describe('BasicDialogComponent', () => {
+  let component: BasicDialogComponent;
+  let fixture: ComponentFixture<BasicDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BasicDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BasicDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/dialog-demo/basic-dialog/basic-dialog.component.ts

@@ -0,0 +1,32 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { LyDialog, LyDialogRef } from '@alyle/ui/dialog';
+
+@Component({
+  selector: 'aui-basic-dialog',
+  templateUrl: './basic-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BasicDialogComponent {
+
+  constructor(
+    private _dialog: LyDialog
+  ) { }
+
+  open() {
+    const dialogRef = this._dialog.open<DialogDemo>(DialogDemo, {
+      width: 320
+    });
+    dialogRef.afterClosed.subscribe((result) => console.log(result));
+  }
+
+}
+
+@Component({
+  templateUrl: './dialog-demo.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DialogDemo {
+  constructor(
+    public dialogRef: LyDialogRef
+  ) { }
+}

src/app/docs/components/dialog-demo/basic-dialog/basic-dialog.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LyDialogModule } from '@alyle/ui/dialog';
+import { LyGridModule } from '@alyle/ui/grid';
+import { LyButtonModule } from '@alyle/ui/button';
+import { LyTypographyModule } from '@alyle/ui/typography';
+
+import { BasicDialogComponent, DialogDemo } from './basic-dialog.component';
+
+@NgModule({
+  declarations: [BasicDialogComponent, DialogDemo],
+  entryComponents: [DialogDemo],
+  imports: [
+    CommonModule,
+    LyDialogModule,
+    LyGridModule,
+    LyButtonModule,
+    LyTypographyModule
+  ],
+  exports: [BasicDialogComponent]
+})
+export class BasicDialogModule { }

src/app/docs/components/dialog-demo/basic-dialog/dialog-demo.html

@@ -0,0 +1,10 @@
+<h4 ly-dialog-title gutterBottom>Use location service?</h4>
+<div ly-dialog-content>
+  <p lyTyp="body2" color="text:secondary">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam earum dolor, iusto fugit in dolore.
+  </p>
+</div>
+<ly-grid container justify="end" ly-dialog-actions>
+  <button ly-button color="primary" (click)="dialogRef.close()">DISAGREE</button>
+  <button ly-button color="primary" (click)="dialogRef.close(true)">AGREE</button>
+</ly-grid>

src/app/docs/components/dialog-demo/dialog-demo.component.html

@@ -0,0 +1,38 @@
+<p>
+  The <span prism code="LyDialog" language="ts"></span> service can be used to open modal dialogs.
+</p>
+
+<h2 [lyTyp]="'display1'" gutter>Basic Dialog</h2>
+<demo-view
+  path="docs/components/dialog-demo/basic-dialog"
+  [extraPaths]="['dialog-demo.html']"
+>
+  <aui-basic-dialog></aui-basic-dialog>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Full-screen dialog</h2>
+<demo-view
+  path="docs/components/dialog-demo/full-screen-dialog"
+  [extraPaths]="['full-screen-dialog.html']"
+>
+  <aui-full-screen-dialog></aui-full-screen-dialog>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Responsive full-screen</h2>
+<p>
+  Resize the screen to see changes.
+</p>
+<demo-view
+  path="docs/components/dialog-demo/dialog-responsive"
+  [extraPaths]="['dialog-responsive-dialog.html']"
+>
+  <aui-dialog-responsive></aui-dialog-responsive>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Prompt</h2>
+<demo-view
+  path="docs/components/dialog-demo/dialog-prompt"
+  [extraPaths]="['dialog-prompt-dialog.html']"
+>
+  <aui-dialog-prompt></aui-dialog-prompt>
+</demo-view>

src/app/docs/components/dialog-demo/dialog-demo.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogDemoComponent } from './dialog-demo.component';
+
+describe('DialogDemoComponent', () => {
+  let component: DialogDemoComponent;
+  let fixture: ComponentFixture<DialogDemoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogDemoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/dialog-demo/dialog-demo.component.ts

@@ -0,0 +1,8 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'aui-dialog-demo',
+  templateUrl: './dialog-demo.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DialogDemoComponent { }

src/app/docs/components/dialog-demo/dialog-prompt/dialog-prompt-dialog.html

@@ -0,0 +1,13 @@
+<h4 ly-dialog-title gutterBottom>What's your name?</h4>
+<div ly-dialog-content>
+  <ly-field>
+    <input lyNativeControl
+      placeholder="Type you name"
+      [(ngModel)]="data.name"
+    >
+  </ly-field>
+</div>
+<ly-grid container justify="end" ly-dialog-actions>
+  <button ly-button color="primary" (click)="dialogRef.close()">CANCEL</button>
+  <button ly-button color="primary" (click)="dialogRef.close(data.name)">DONE</button>
+</ly-grid>

src/app/docs/components/dialog-demo/dialog-prompt/dialog-prompt.component.html

@@ -0,0 +1,4 @@
+<button ly-button (click)="open()">open</button>
+<pre *ngIf="name">
+  name: {{ name }}
+</pre>

src/app/docs/components/dialog-demo/dialog-prompt/dialog-prompt.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogPromptComponent } from './dialog-prompt.component';
+
+describe('DialogPromptComponent', () => {
+  let component: DialogPromptComponent;
+  let fixture: ComponentFixture<DialogPromptComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogPromptComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogPromptComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});