feat(select): initial commit for select (#72)

feat(select): initial commit for select

* fix `onContainerClick`

* add overlay

* fix onFocus

* fix focus state

* add `Positioning`

* support for `ngModel`

* fix placeholder

* add demo

* fix 2-way value binding

* support for multiple selection

* update docs

* update docs

* fix styles

* add `valueKey`

* fix multiple select with object value

* update docs

* update styles

* remove logs

* fix api docs

* support for `[disabled]`

* fix cursor

* update docs

* fix the color of selectArrow

* fix some errors

* fix ssr

.package.conf.yml

@@ -24,3 +24,4 @@ components:
   '@alyle/ui/avatar': avatar
   '@alyle/ui/list': list
   '@alyle/ui/divider': divider
+  '@alyle/ui/select': select

.prerender.conf.json

@@ -28,6 +28,7 @@
     "components/tooltip",
     "components/avatar",
     "components/list",
-    "components/divider"
+    "components/divider",
+    "components/select"
   ]
 }

README.md

@@ -38,6 +38,7 @@
 |menu|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/menu)|
 |radio|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/radio)|
 |snack bar|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/snack-bar)|
+|select|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/select)|
 |tabs|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/layout/tabs)|
 |toolbar|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/toolbar)|
 |tooltip|✔️|✔️|[Docs](https://alyle-ui.firebaseapp.com/components/tooltip)|

package.json

@@ -26,7 +26,7 @@
     "tools:typedoc": "yarn typedoc --mode modules --json dist/docs.json --tsconfig tsconfig.td.json --excludePrivate --excludeProtected --excludeExternals",
     "tools:docs": "yarn tools:typedoc && node dist/tools/docs",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "bundlesizelimit": "rm -rf dist/bundle.js && cat dist/@alyle/ui/**/*.umd.min.js >> dist/bundle.js && yarn bundlesize -f dist/bundle.js -c false -s '200 KB'",
+    "bundlesizelimit": "rm -rf dist/bundle.js && cat dist/@alyle/ui/**/*.umd.min.js >> dist/bundle.js && yarn bundlesize -f dist/bundle.js -c false -s '250 KB'",
     "serve:lib": "hs src/app -p 1212 -g --cors 'Access-Control-Allow-Origin' -c0",
     "build:schematics": "tsc -p src/lib/schematics/tsconfig.json && cp -r src/lib/schematics/ dist/@alyle/ui/ && rm -rf dist/@alyle/ui/schematics/**/*.ts",
     "test:sc": "jasmine dist/@alyle/ui/schematics/**/*.spec.js"

src/app/api/api.component.html

@@ -5,20 +5,20 @@ <h2 [lyTyp]="'headline'" gutter>Modules</h2>
     <h2 [lyTyp]="'headline'" gutter>Components</h2>
     <ng-template ngFor let-component [ngForOf]="api.componentList" let-x="index">
       <h3 [lyTyp]="'title'" gutter>{{ component.name }}</h3>
-      <p>Selector: <span prism language="typescript" code="'{{ component.selector }}'"></span></p>
-      <p *ngIf="component.inputs as inputs">Inputs: <prism language="typescript" code="{{ inputs | json }}"></prism></p>
-      <p *ngIf="component.exportAs as exportAs">ExportAs: <span prism language="typescript" code="'{{ exportAs }}'"></span></p>
+      <p>Selector: <span prism language="typescript" [code]="component.selector"></span></p>
+      <p *ngIf="component.inputs as inputs">Inputs: <prism language="typescript" code="{{ inputs }}"></prism></p>
+      <p *ngIf="component.exportAs as exportAs">ExportAs: <span prism language="typescript" [code]="exportAs"></span></p>
       <prism *ngIf="component.children" language="typescript" [code]="component.children"></prism>
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="api.directiveList.length">
     <h2 [lyTyp]="'headline'" gutter>Directives</h2>
     <ng-template ngFor let-directive [ngForOf]="api.directiveList" let-x="index">
       <h3 [lyTyp]="'title'" gutter>{{ directive.name }}</h3>
-      <p>Selector: <span prism language="typescript" code="'{{ directive.selector }}'"></span></p>
-      <p *ngIf="directive.inputs as inputs">Inputs: <prism language="typescript" code="{{ inputs | json }}"></prism></p>
+      <p>Selector: <span prism language="typescript" [code]="directive.selector"></span></p>
+      <p *ngIf="directive.inputs as inputs">Inputs: <prism language="typescript" code="{{ inputs }}"></prism></p>
 
-      <p *ngIf="directive.exportAs as exportAs">ExportAs: <span prism language="typescript" code="'{{ exportAs }}'"></span></p>
+      <p *ngIf="directive.exportAs as exportAs">ExportAs: <span prism language="typescript" [code]="exportAs"></span></p>
       <prism *ngIf="directive.children" language="typescript" [code]="directive.children"></prism>
     </ng-template>
   </ng-template>

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

@@ -0,0 +1,41 @@
+<h4 lyTyp="title">native html select</h4>
+<ly-field>
+  <ly-label>Label</ly-label>
+  <select lyNativeControl>
+    <option value="1">item 1</option>
+    <option value="2">item 2</option>
+    <option value="3">item 3</option>
+  </select>
+</ly-field>
+
+<h4 lyTyp="title">ly-select</h4>
+<ly-field>
+  <ly-label>Label</ly-label>
+  <ly-select placeholder="Placeholder">
+    <ly-option value="1">Item 1</ly-option>
+    <ly-option value="2">Item 2</ly-option>
+    <ly-option value="3">Item 3</ly-option>
+  </ly-select>
+</ly-field>
+
+<h4 lyTyp="title">appearance</h4>
+
+<ly-field appearance="filled">
+  <ly-label>Label</ly-label>
+  <ly-select placeholder="Placeholder">
+    <ly-option value="1">Item 1</ly-option>
+    <ly-option value="2">Item 2</ly-option>
+    <ly-option value="3">Item 3</ly-option>
+  </ly-select>
+</ly-field>
+
+<br />
+
+<ly-field appearance="outlined">
+  <ly-label>Label</ly-label>
+  <ly-select placeholder="Placeholder">
+    <ly-option value="1">Item 1</ly-option>
+    <ly-option value="2">Item 2</ly-option>
+    <ly-option value="3">Item 3</ly-option>
+  </ly-select>
+</ly-field>

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

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

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

@@ -0,0 +1,15 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { LyTheme2, ThemeVariables } from '@alyle/ui';
+
+const STYLES = (_theme: ThemeVariables) => ({ });
+
+@Component({
+  selector: 'aui-basic-select',
+  templateUrl: './basic-select.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BasicSelectComponent {
+  readonly classes = this._theme.addStyleSheet(STYLES);
+
+  constructor(private _theme: LyTheme2) { }
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LyFieldModule } from '@alyle/ui/field';
+import { LySelectModule } from '@alyle/ui/select';
+import { LyTypographyModule } from '@alyle/ui/typography';
+
+import { BasicSelectComponent } from './basic-select.component';
+
+@NgModule({
+  declarations: [BasicSelectComponent],
+  imports: [
+    CommonModule,
+    LyFieldModule,
+    LySelectModule,
+    LyTypographyModule
+  ],
+  exports: [BasicSelectComponent]
+})
+export class BasicSelectModule { }

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

@@ -0,0 +1,33 @@
+<p>
+  <span prism code="<ly-select>" language="html"></span> allows user input through specified options.
+</p>
+
+<h2 [lyTyp]="'display1'" gutter>Basic Select</h2>
+<demo-view path="docs/components/select-demo/basic-select">
+  <aui-basic-select></aui-basic-select>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Select with 2-way value binding</h2>
+<demo-view path="docs/components/select-demo/select-with-ng-model">
+  <aui-select-with-ng-model></aui-select-with-ng-model>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Select with multiple selection</h2>
+<demo-view path="docs/components/select-demo/select-multiple">
+  <aui-select-multiple></aui-select-multiple>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Select with reactive forms</h2>
+<demo-view path="docs/components/select-demo/select-reactive-form">
+  <aui-select-reactive-form></aui-select-reactive-form>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Select with option object value</h2>
+<demo-view path="docs/components/select-demo/select-option-object-value">
+  <aui-select-option-object-value></aui-select-option-object-value>
+</demo-view>
+
+<h2 [lyTyp]="'display1'" gutter>Disabled select</h2>
+<demo-view path="docs/components/select-demo/select-disable">
+  <aui-select-disable></aui-select-disable>
+</demo-view>

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

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

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

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

src/app/docs/components/select-demo/select-disable/select-disable.component.html

@@ -0,0 +1,23 @@
+<p>
+  <ly-checkbox [formControl]="disableSelect">Disable select</ly-checkbox>
+</p>
+
+<h4 lyTyp="title" gutter>native html select</h4>
+<ly-field>
+  <ly-label>Label</ly-label>
+  <select lyNativeControl placeholder="Placeholder" [disabled]="disableSelect.value">
+    <option value="1">item 1</option>
+    <option value="2" disabled>item 2</option>
+    <option value="3">item 3</option>
+  </select>
+</ly-field>
+
+<h4 lyTyp="title" gutter>ly-select</h4>
+<ly-field>
+  <ly-label>Label</ly-label>
+  <ly-select placeholder="Placeholder" [disabled]="disableSelect.value">
+    <ly-option value="1">Item 1</ly-option>
+    <ly-option value="2" disabled>Item 2</ly-option>
+    <ly-option value="3">Item 3</ly-option>
+  </ly-select>
+</ly-field>

src/app/docs/components/select-demo/select-disable/select-disable.component.spec.ts

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

src/app/docs/components/select-demo/select-disable/select-disable.component.ts

@@ -0,0 +1,11 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'aui-select-disable',
+  templateUrl: './select-disable.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SelectDisableComponent {
+  disableSelect = new FormControl(false);
+}

src/app/docs/components/select-demo/select-disable/select-disable.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { LyFieldModule } from '@alyle/ui/field';
+import { LySelectModule } from '@alyle/ui/select';
+import { LyTypographyModule } from '@alyle/ui/typography';
+import { LyCheckboxModule } from '@alyle/ui/checkbox';
+
+import { SelectDisableComponent } from './select-disable.component';
+
+@NgModule({
+  declarations: [SelectDisableComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    LyFieldModule,
+    LySelectModule,
+    LyTypographyModule,
+    LyCheckboxModule
+  ],
+  exports: [SelectDisableComponent]
+})
+export class SelectDisableModule { }

src/app/docs/components/select-demo/select-multiple/select-multiple.component.html

@@ -0,0 +1,7 @@
+<ly-field>
+  <ly-select placeholder="Label" [(ngModel)]="selecteds" multiple>
+    <ly-option [value]="999" disabled>Option dfgd</ly-option>
+    <ly-option *ngFor="let item of items; index as i" [value]="i">Option {{ i }}</ly-option>
+  </ly-select>
+</ly-field>
+<p>You selected: {{ selecteds | json }}</p>

src/app/docs/components/select-demo/select-multiple/select-multiple.component.spec.ts

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

src/app/docs/components/select-demo/select-multiple/select-multiple.component.ts

@@ -0,0 +1,11 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'aui-select-multiple',
+  templateUrl: './select-multiple.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SelectMultipleComponent {
+  items = Array.from(Array(25).keys());
+  selecteds = [2, 4];
+}

src/app/docs/components/select-demo/select-multiple/select-multiple.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { LyFieldModule } from '@alyle/ui/field';
+import { LySelectModule } from '@alyle/ui/select';
+
+import { SelectMultipleComponent } from './select-multiple.component';
+
+@NgModule({
+  declarations: [SelectMultipleComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    LyFieldModule,
+    LySelectModule
+  ],
+  exports: [SelectMultipleComponent]
+})
+export class SelectMultipleModule { }

src/app/docs/components/select-demo/select-option-object-value/select-option-object-value.component.html

@@ -0,0 +1,10 @@
+<ly-field appearance="outlined">
+  <ly-label>Label</ly-label>
+  <ly-select placeholder="Placeholder" [formControl]="fruitControl" [valueKey]="valueKeyFn" multiple>
+    <ly-option *ngFor="let fruit of fruits" [value]="fruit">{{ fruit.viewValue }}</ly-option>
+  </ly-select>
+  <ly-hint>Hint</ly-hint>
+  <ly-error *ngIf="fruitControl.hasError('required')">Required</ly-error>
+</ly-field>
+
+<pre>You selected: {{ fruitControl.value | json }}</pre>