refactor: refactor all components (#138)

.editorconfig

@@ -1,52 +1,15 @@
-[*]
-charset=utf-8
-end_of_line=lf
-trim_trailing_whitespace=true
-insert_final_newline=false
-indent_style=space
-indent_size=4
-
-[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
-indent_style=space
-indent_size=2
-
-[{.babelrc,.stylelintrc,.eslintrc,jest.config,*.json,*.jsb3,*.jsb2,*.bowerrc}]
-indent_style=space
-indent_size=2
-
-[*.css]
-indent_style=space
-indent_size=2
-
-[{*.applejs,*.js}]
-indent_style=space
-indent_size=2
-
-[{*.ats,*.ts}]
-indent_style=space
-indent_size=2
+# http://editorconfig.org
 
-[*.tsx]
-indent_style=space
-indent_size=2
-
-[*.js]
-indent_style=space
-indent_size=2
-
-[*.js.map]
-indent_style=space
-indent_size=2
-
-[*.less]
-indent_style=space
-indent_size=2
-
-[{.analysis_options,*.yml,*.yaml}]
-indent_style=space
-indent_size=2
-
-[tslint.json]
-indent_style=space
-indent_size=2
+root = true
 
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.prettierignore

@@ -0,0 +1,10 @@
+**/*.md
+**/*.svg
+**/test.ts
+_nginx/
+_screenshot/
+node_modules/
+coverage/
+dist/
+package.json
+src/templates/

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "useTabs": false,
+  "overrides": [{
+    "files": ".prettierrc",
+    "options": {
+      "parser": "json"
+    }
+  }]
+}

.stylelintrc

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-css-modules",
+    "stylelint-config-rational-order",
+    "stylelint-config-prettier"
+  ],
+  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
+  "rules": {
+    "no-descending-specificity": null,
+    "plugin/declaration-block-no-ignored-properties": true,
+    "selector-type-no-unknown": null,
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": [
+          "ng-deep"
+        ]
+      }
+    ]
+  },
+  "ignoreFiles": [
+    "src/assets/**/*"
+  ]
+}

.vscode/settings.json

@@ -1,13 +1,25 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "javascript.implicitProjectConfig.checkJs": true,
   "files.watcherExclude": {
     "**/.git/objects/**": true,
     "**/.git/subtree-cache/**": true,
     "**/node_modules/*/**": true,
     "**/dist/*/**": true,
-    "**/coverage/*/**": true,
-    "**/tools/*/**": true
+    "**/coverage/*/**": true
   },
-  "tslint.autoFixOnSave": true
-}
+  "html.format.wrapAttributes": "force-aligned",
+  "html.format.wrapLineLength": 100,
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true,
+  },
+  "[markdown]": {
+    "editor.formatOnSave": false
+  },
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "prettier.stylelintIntegration": true
+}

README.md

@@ -16,7 +16,12 @@ ngx-weui
 
 </div>
 
-[![](https://cdn-images-1.medium.com/max/3840/1*DzVxlbQups8aAEhFRuZ6dQ.png)](https://cipchk.github.io/ngx-weui/)
+[![](https://cdn-images-1.medium.com/max/1600/1*ceWDQUy3-MQgEchW6SuSRA.png)](https://cipchk.github.io/ngx-weui/)
+
+## Version
+
+- WeUI 1.x using `7.0.x`
+- WeUI 2.x using `7.1.x`
 
 ## Table of Contents
 
@@ -40,8 +45,6 @@ ngx-weui
 
 ```bash
 npm install -g @angular/cli
-# Optional: Set default use of yarn to install dependencies
-# ng config -g cli.packageManager yarn
 ```
 
 2. New a empty angular project

components/accordion/accordion-panel.component.ts

@@ -1,36 +1,35 @@
-import {
-  Component,
-  Input,
-  Inject,
-  HostBinding,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { InputBoolean } from 'ngx-weui/core';
 import { AccordionComponent } from './accordion.component';
 
 @Component({
   selector: 'weui-accordion-panel',
+  exportAs: 'weuiAccordionPanel',
   template: `
-    <div role="tab" (click)="_toggle($event)"><ng-content select="[heading]"></ng-content></div>
+    <div role="tab" (click)="_toggle()"><ng-content select="[heading]"></ng-content></div>
     <div role="tabpanel" class="weui-accordion-content"><ng-content></ng-content></div>
-    `,
+  `,
   host: {
     '[class.weui-accordion-panel-disabled]': 'disabled',
     '[class.weui-accordion-active]': 'active',
-  }
+  },
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class AccordionPanelComponent implements OnInit, OnDestroy {
   /**
    * 是否禁止
    */
-  @Input() disabled: boolean = false;
+  @Input() @InputBoolean() disabled: boolean = false;
 
   private _active: boolean = false;
 
   /**
    * 是否展开
    */
   @Input()
+  @InputBoolean()
   get active(): boolean {
     return this._active;
   }
@@ -40,9 +39,7 @@ export class AccordionPanelComponent implements OnInit, OnDestroy {
     if (value) this.accordion._closeOthers(this);
   }
 
-  constructor(
-    @Inject(AccordionComponent) protected accordion: AccordionComponent,
-  ) { }
+  constructor(@Inject(AccordionComponent) protected accordion: AccordionComponent) {}
 
   ngOnInit() {
     this.accordion._add(this);
@@ -52,7 +49,7 @@ export class AccordionPanelComponent implements OnInit, OnDestroy {
     this.accordion._remove(this);
   }
 
-  _toggle(event: Event) {
+  _toggle() {
     if (!this.disabled) {
       this.active = !this.active;
       this.accordion.select.emit(this.accordion._index(this));

components/accordion/accordion.component.ts

@@ -1,24 +1,30 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { AnimateType, InputBoolean } from 'ngx-weui/core';
 import { AccordionPanelComponent } from './accordion-panel.component';
 import { AccordionConfig } from './accordion.config';
-import { AnimateType } from '../utils/types';
 
 @Component({
   selector: 'weui-accordion',
-  template: `<ng-content></ng-content>`,
+  exportAs: 'weuiAccordion',
+  template: `
+    <ng-content></ng-content>
+  `,
   host: {
     '[attr.aria-multiselectable]': 'closeOthers',
   },
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class AccordionComponent {
   /**
    * 是否可折叠，`true` 表示同时所有都允许展开，`false` 表示同时只允许一个展开，默认：`false`
    */
-  @Input() collapsible: boolean = false;
+  @Input() @InputBoolean() collapsible: boolean = false;
   /**
    * 自动展开第一次，默认：`true`
    */
-  @Input() activeFirst: boolean = true;
+  @Input() @InputBoolean() activeFirst: boolean = true;
   /**
    * 动画类型，`none` 无动画，`slide` 滑动，默认：`slide`
    */
@@ -27,7 +33,7 @@ export class AccordionComponent {
   /**
    * 展开时回调，参数为面板下标。
    */
-  @Output() select = new EventEmitter<number>();
+  @Output() readonly select = new EventEmitter<number>();
 
   private panels: AccordionPanelComponent[] = [];
 

components/accordion/accordion.config.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
-import { AnimateType } from '../utils/types';
+import { AnimateType } from 'ngx-weui/core';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class AccordionConfig {
   /**
    * 是否可折叠，`false` 表示保持只有一个可折叠，`true` 表示所有都允许，默认：`false`

components/accordion/accordion.module.ts

@@ -1,16 +1,11 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { AccordionPanelComponent } from './accordion-panel.component';
 import { AccordionComponent } from './accordion.component';
-import { AccordionConfig } from './accordion.config';
 
 @NgModule({
   imports: [CommonModule],
   declarations: [AccordionPanelComponent, AccordionComponent],
   exports: [AccordionPanelComponent, AccordionComponent],
 })
-export class AccordionModule {
-  public static forRoot(): ModuleWithProviders {
-    return { ngModule: AccordionModule, providers: [AccordionConfig] };
-  }
-}
+export class AccordionModule {}