From ebe324924f440025069435ebcad99782cd3566c4 Mon Sep 17 00:00:00 2001 From: zangguodong <237974119@qq.com> Date: Mon, 21 Sep 2020 17:14:40 +0800 Subject: [PATCH 1/6] fix: firefox aui-number-input css bug (#48) Co-authored-by: Guodong --- src/input/number-input/number-input.component.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/input/number-input/number-input.component.scss b/src/input/number-input/number-input.component.scss index 0da696983..c9721a056 100644 --- a/src/input/number-input/number-input.component.scss +++ b/src/input/number-input/number-input.component.scss @@ -41,6 +41,10 @@ $block: 'aui-number-input'; border-radius: 0 $border-radius $border-radius 0; } + &__input { + min-width: 0; + } + .aui-input { &:not(:first-child) { border-radius: 0; From 229408170cb115bc9019ddac193ed84d7e657205 Mon Sep 17 00:00:00 2001 From: JounQin Date: Wed, 23 Sep 2020 10:35:21 +0800 Subject: [PATCH 2/6] docs: remove incorrect white character (#49) --- README.md | 2 +- docs/ALAUDA_UI_INTRODUCTION.md | 10 +++++----- docs/CODING_STANDARDS.md | 10 +++++----- docs/CONTRIBUTING.md | 2 +- src/icon/README.md | 4 ++-- src/table/README.md | 2 +- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 342cccb01..bde6321c5 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ yarn install yarn start ``` -开发环境基于 [Storybook](https://storybook.js.org/) 运行， 查看 [文档](https://storybook.js.org/basics/guide-angular/)。 +开发环境基于 [Storybook](https://storybook.js.org/) 运行，查看 [文档](https://storybook.js.org/basics/guide-angular/)。 ## Test diff --git a/docs/ALAUDA_UI_INTRODUCTION.md b/docs/ALAUDA_UI_INTRODUCTION.md index a2b3b5e1f..e557197f1 100644 --- a/docs/ALAUDA_UI_INTRODUCTION.md +++ b/docs/ALAUDA_UI_INTRODUCTION.md @@ -8,8 +8,8 @@ - 单元测试 => jest: 命令行运行、更快的测试速度、支持 snapshot 对比 - 编译 => ngc/rollup: 参照 google [APF](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview#)，支持 AOT。编译过程： - 复制源码并 inline template 和样式 - - ngc 将  ts 编译为 js 并生成 metadata 供 AOT 使用 - - rollup 将代码  打包成 es2015/es5/umd  模块 + - ngc 将 ts 编译为 js 并生成 metadata 供 AOT 使用 + - rollup 将代码打包成 es2015/es5/umd 模块 - 复制 package.json 等 - 项目结构 => - config: jest/storybook 配置 @@ -20,7 +20,7 @@ - src: 源码 - stories: demo app -## Coding Standards +## Coding Standards ### Angular @@ -53,11 +53,11 @@ export class XComponent {} ## 需要注意的点 -- aui 目前没有提供一次性导入全部组件的模块，需要单独导入  要用的组件模块 +- aui 目前没有提供一次性导入全部组件的模块，需要单独导入要用的组件模块 - 当 `import` 路径为文件夹时，ngc 无法正确生成 `metadata`，所以导出模块的文件全部命名为 `public-api.ts` - 运行 jest 测试前组件模板已被预编译为 `inline template`，因此不需要再异步编译 - 通过 `pipe` 方法组合操作符 -- 多行注释会保留在  编译后的文件中，所以写注释时要考虑下是不是应该用单行注释（比如 `TODO`） +- 多行注释会保留在编译后的文件中，所以写注释时要考虑下是不是应该用单行注释（比如 `TODO`） ## Contributing diff --git a/docs/CODING_STANDARDS.md b/docs/CODING_STANDARDS.md index 743a2ed68..d53f69176 100644 --- a/docs/CODING_STANDARDS.md +++ b/docs/CODING_STANDARDS.md @@ -12,9 +12,9 @@ getter 不可产生副作用。 每个模块新建独立的 `*.types.ts` 文件声明接口或类型。 -目录结构、模块导入导出方式**必须**与现有组件保持一致， 错误的方式可能导致 AOT 编译出错。[see more](./AOT_NOTES.md) +目录结构、模块导入导出方式**必须**与现有组件保持一致，错误的方式可能导致 AOT 编译出错。[see more](./AOT_NOTES.md) -## Angular +## Angular 使用 onPush 模式以获得更好的性能。 @@ -36,7 +36,7 @@ getter 不可产生副作用。 export class ButtonComponent {} ``` -使用 BEM 命名方法论。在严格遵守 [BEM](http://getbem.com/) 规范的基础上，可以使用以 `is-` 为前缀的类名  表示状态。 +使用 BEM 命名方法论。在严格遵守 [BEM](http://getbem.com/) 规范的基础上，可以使用以 `is-` 为前缀的类名表示状态。 ```scss .aui-button { @@ -56,10 +56,10 @@ export class ButtonComponent {} } ``` -所有颜色 、字体等在 `./src/theme/var.scss` 中使用语义化变量名进行配置。 +所有颜色、字体等在 `./src/theme/var.scss` 中使用语义化变量名进行配置。 ## Test - 使用 [Jest](https://facebook.github.io/jest/) 运行单元测试。在运行测试前组件已预编译为 `inline template`，因此在测试时不需再调用异步的 `compileComponents`。 +使用 [Jest](https://facebook.github.io/jest/) 运行单元测试。在运行测试前组件已预编译为 `inline template`，因此在测试时不需再调用异步的 `compileComponents`。 虽然 `EventEmitter` 的回调函数是同步调用，但要保证回调函数内测试代码确实得到执行必须在 `subscribe` 内执行 `done()`。 diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 71c294f50..802945967 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -7,7 +7,7 @@ The following conditions must be met before merge to `master`: - at least 1 approval - the last commit was successfully built and no failed builds -## Commit Message +## Commit Message ### Commit Message Format diff --git a/src/icon/README.md b/src/icon/README.md index 28fc30c2e..e9a89f622 100644 --- a/src/icon/README.md +++ b/src/icon/README.md @@ -19,8 +19,8 @@ 主要考虑了三种实现方式：`font icon`，`inline svg`，`svg symbols`。 -- `font icon`：目前使用最广泛最成熟的方案，但因为[一些缺陷](https://css-tricks.com/icon-fonts-vs-svg/)业内开始不再推崇这种方式。 针对 `aui-icon` 的使用场景主要缺陷是可能出现的渲染问题。 -- `inline svg`：实现上比较麻烦，DOM 操作太多。 +- `font icon`：目前使用最广泛最成熟的方案，但因为[一些缺陷](https://css-tricks.com/icon-fonts-vs-svg/)业内开始不再推崇这种方式。针对 `aui-icon` 的使用场景主要缺陷是可能出现的渲染问题。 +- `inline svg`：实现上比较麻烦，DOM 操作太多。 - `svg symbols`：具有 `inline svg` 的所有优点，使用简单优雅。缺陷是浏览器兼容性，IE 所有不支持外链 svg，所以需要将 svg 插入到文档中。 ## 使用自定义图标 diff --git a/src/table/README.md b/src/table/README.md index a16928cda..5c8f283aa 100644 --- a/src/table/README.md +++ b/src/table/README.md @@ -1,6 +1,6 @@ ## 设计 -基于 angular/material 的 MatTable 修改， 功能基本一致，仅移除 MatTableDataSource 相关代码`（MatTableDataSource和MatTable本身并无关系，而且功能并不适合基于服务端的排序及过滤，未来是否会抽取适合服务端的排序及过滤功能还需要考虑）`，样式按 Alauda UI 设计规范调整 。MatTable 相关组件基于 CdkTable 开发，未来 AuiTable 的  功能变更会结合 CdkTable 来做。CdkTable 的[设计目标](https://docs.google.com/document/d/1ZyKhwrgqfTBAn7saTq2jPlep2_CwSw5DeoZ8UbaXrC0/preview)和 AuiTable 有很多  共同点，可以作为一个后续功能迭代的基础。 +基于 angular/material 的 MatTable 修改，功能基本一致，仅移除 MatTableDataSource 相关代码`（MatTableDataSource和MatTable本身并无关系，而且功能并不适合基于服务端的排序及过滤，未来是否会抽取适合服务端的排序及过滤功能还需要考虑）`，样式按 Alauda UI 设计规范调整 。MatTable 相关组件基于 CdkTable 开发，未来 AuiTable 的功能变更会结合 CdkTable 来做。CdkTable 的[设计目标](https://docs.google.com/document/d/1ZyKhwrgqfTBAn7saTq2jPlep2_CwSw5DeoZ8UbaXrC0/preview)和 AuiTable 有很多共同点，可以作为一个后续功能迭代的基础。 ## 使用 From d900f4573415929f2e0a9a8b842f8888ce3d8c62 Mon Sep 17 00:00:00 2001 From: JounQin Date: Wed, 23 Sep 2020 14:16:39 +0800 Subject: [PATCH 3/6] fix: compatible with cdk 10.2+, support sticky header (#50) --- package.json | 4 ++-- src/table/table-column-def.directive.ts | 3 +++ src/table/table-header-row-def.directive.ts | 3 +++ src/table/table.component.ts | 26 +++++++++++++++++++-- stories/table/index.ts | 4 +++- yarn.lock | 8 +++---- 6 files changed, 39 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 80f56e073..02970e4ef 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ }, "peerDependencies": { "@angular/animations": "^10.0.0", - "@angular/cdk": "^10.1.0", + "@angular/cdk": "^10.2.2", "@angular/common": "^10.0.0", "@angular/core": "^10.0.0", "@angular/forms": "^10.0.0", @@ -51,7 +51,7 @@ "@angular-devkit/build-angular": "^0.1000.5", "@angular-devkit/core": "^10.0.1", "@angular/animations": "^10.0.8", - "@angular/cdk": "^10.1.2", + "@angular/cdk": "^10.2.2", "@angular/cli": "^10.0.5", "@angular/common": "^10.0.8", "@angular/compiler": "^10.0.8", diff --git a/src/table/table-column-def.directive.ts b/src/table/table-column-def.directive.ts index 4b0c5664a..f8ae178ee 100644 --- a/src/table/table-column-def.directive.ts +++ b/src/table/table-column-def.directive.ts @@ -18,4 +18,7 @@ export class TableColumnDefDirective extends CdkColumnDef { /** Unique name for this column. */ @Input('auiTableColumnDef') name: string; + + @Input() + sticky: boolean; } diff --git a/src/table/table-header-row-def.directive.ts b/src/table/table-header-row-def.directive.ts index 02fd3658d..deaf2bede 100644 --- a/src/table/table-header-row-def.directive.ts +++ b/src/table/table-header-row-def.directive.ts @@ -17,4 +17,7 @@ import { Directive, Input } from '@angular/core'; export class TableHeaderRowDefDirective extends CdkHeaderRowDef { @Input('auiTableHeaderRowDef') columns: string[]; + + @Input('auiTableHeaderRowDefSticky') + sticky: boolean; } diff --git a/src/table/table.component.ts b/src/table/table.component.ts index 8971133ea..52c3a0c4b 100644 --- a/src/table/table.component.ts +++ b/src/table/table.component.ts @@ -1,6 +1,12 @@ import { + _DisposeViewRepeaterStrategy, + _VIEW_REPEATER_STRATEGY, +} from '@angular/cdk/collections'; +import { + CDK_TABLE, CDK_TABLE_TEMPLATE, CdkTable, + _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, } from '@angular/cdk/table'; import { @@ -20,6 +26,22 @@ import { }, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - providers: [_CoalescedStyleScheduler], + providers: [ + { + provide: CDK_TABLE, + useExisting: TableComponent, + }, + { + provide: _VIEW_REPEATER_STRATEGY, + useClass: _DisposeViewRepeaterStrategy, + }, + { + provide: _COALESCED_STYLE_SCHEDULER, + useClass: _CoalescedStyleScheduler, + }, + ], }) -export class TableComponent extends CdkTable {} +export class TableComponent extends CdkTable { + // FIXME: disable override because it will break constructor, but why MatTable works? + // protected stickyCssClass = 'aui-table-sticky'; +} diff --git a/stories/table/index.ts b/stories/table/index.ts index 58e45ed6c..534d479e9 100644 --- a/stories/table/index.ts +++ b/stories/table/index.ts @@ -20,6 +20,7 @@ storiesOf('Table', module) .add('table', () => { const disableRow = boolean('disableRow', false); const dataSource = object('dataSource', DATA_SOURCE); + const sticky = boolean('sticky', false); return { moduleMetadata: { imports: [TableModule], @@ -51,7 +52,7 @@ storiesOf('Table', module) Date: Thu, 24 Sep 2020 14:24:38 +0800 Subject: [PATCH 4/6] fix: changeValue should trigger before blur (#52) Co-authored-by: Guodong --- src/form/common-form.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/form/common-form.ts b/src/form/common-form.ts index ffcddb8d3..a5258825c 100644 --- a/src/form/common-form.ts +++ b/src/form/common-form.ts @@ -63,8 +63,8 @@ export class CommonFormControl implements ControlValueAccessor { protected emitValueChange(value: T) { if (this.onChange) { - this.writeValue(value); this.onChange(value); + this.writeValue(value); } this.valueChange.emit(value); } From 7291f9519fb69664a9e5bff729a6ae25d4320cee Mon Sep 17 00:00:00 2001 From: JounQin Date: Fri, 25 Sep 2020 11:50:10 +0800 Subject: [PATCH 5/6] feat: bump deps, support typescript 4.0+ (#51) --- .storybook/main.js | 4 +- package.json | 56 +- .../accordion-item.component.ts | 3 +- src/autocomplete/autocomplete.directive.ts | 17 +- src/checkbox/checkbox.component.ts | 3 +- src/dialog/dialog.service.ts | 20 +- src/dropdown/dropdown.directive.ts | 24 +- src/dropdown/menu-item/menu-item.component.ts | 10 +- src/dropdown/submenu/submenu.component.ts | 6 - .../__snapshots__/form.component.spec.ts.snap | 4 +- src/form/form.component.spec.ts | 4 +- src/icon/icon.component.html | 8 +- .../input-group.component.spec.ts.snap | 8 +- .../number-input/number-input.component.ts | 4 +- src/notification/notification.component.ts | 3 +- src/select/base-select.ts | 3 +- .../multi-select/multi-select.component.ts | 3 +- src/select/select.component.ts | 3 +- src/sort/sort.spec.ts | 8 +- src/table/table-column-def.directive.ts | 11 +- src/tabs/tab-directives.ts | 3 +- src/tabs/tab-group.component.spec.ts | 29 +- src/tooltip/base-tooltip.ts | 11 +- src/tooltip/tooltip-copy.directive.ts | 7 +- src/tooltip/tooltip.directive.ts | 32 +- stories/dialog/index.ts | 4 +- stories/dropdown/dropdown.stories.mdx | 16 +- stories/inline-alert/inline-alert.stories.mdx | 4 +- stories/input/index.ts | 8 +- stories/scrolling/scrolling.stories.mdx | 4 +- stories/table-of-contents/toc.stories.mdx | 16 +- .../expand-demo/expand-demo.component.html | 8 +- stories/tabs/tabs.stories.mdx | 12 +- tslint.json | 1 + yarn.lock | 7866 ++++++++--------- 35 files changed, 3630 insertions(+), 4593 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 7477a1fb8..e9e15d940 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -2,8 +2,8 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = { stories: [ - '../stories/**/index.(js|ts)', - '../stories/**/*.stories.(js|ts|mdx)', + '../stories/**/index.@(js|ts)', + '../stories/**/*.stories.@(js|ts|mdx)', ], addons: [ '@storybook/addon-docs', diff --git a/package.json b/package.json index 02970e4ef..d6eebc717 100644 --- a/package.json +++ b/package.json @@ -48,45 +48,45 @@ "@1stg/app-config": "^0.5.5", "@1stg/lib-config": "^0.5.5", "@1stg/tslint-config": "^0.8.5", - "@angular-devkit/build-angular": "^0.1000.5", - "@angular-devkit/core": "^10.0.1", - "@angular/animations": "^10.0.8", + "@angular-devkit/build-angular": "^0.1001.2", + "@angular-devkit/core": "^10.1.2", + "@angular/animations": "^10.1.2", "@angular/cdk": "^10.2.2", - "@angular/cli": "^10.0.5", - "@angular/common": "^10.0.8", - "@angular/compiler": "^10.0.8", - "@angular/compiler-cli": "^10.0.8", - "@angular/core": "^10.0.8", - "@angular/forms": "^10.0.8", - "@angular/platform-browser": "^10.0.8", - "@angular/platform-browser-dynamic": "^10.0.8", - "@storybook/addon-actions": "^5.3.18", - "@storybook/addon-docs": "^5.3.18", - "@storybook/addon-knobs": "^5.3.18", - "@storybook/addon-storysource": "^5.3.18", - "@storybook/addons": "^5.3.18", - "@storybook/angular": "^5.3.18", - "@storybook/cli": "^5.3.18", - "@storybook/source-loader": "^5.3.18", - "@types/jest": "^26.0.9", - "@types/node": "^14.0.27", + "@angular/cli": "^10.1.2", + "@angular/common": "^10.1.2", + "@angular/compiler": "^10.1.2", + "@angular/compiler-cli": "^10.1.2", + "@angular/core": "^10.1.2", + "@angular/forms": "^10.1.2", + "@angular/platform-browser": "^10.1.2", + "@angular/platform-browser-dynamic": "^10.1.2", + "@storybook/addon-actions": "^6.0.21", + "@storybook/addon-docs": "^6.0.21", + "@storybook/addon-knobs": "^6.0.21", + "@storybook/addon-storysource": "^6.0.21", + "@storybook/addons": "^6.0.21", + "@storybook/angular": "^6.0.21", + "@storybook/cli": "^6.0.21", + "@storybook/source-loader": "^6.0.21", + "@types/jest": "^26.0.14", + "@types/node": "^14.11.2", "babel-loader": "^8.1.0", "clipboard-polyfill": "^3.0.1", "gulp": "^4.0.2", "gulp-dart-sass": "^1.0.2", - "jest": "^26.2.2", + "jest": "^26.4.2", "jest-junit": "^11.1.0", - "jest-preset-angular": "^8.2.1", - "ng-packagr": "^10.0.3", + "jest-preset-angular": "^8.3.1", + "ng-packagr": "^10.1.0", "ng-tslint": "^1.0.0", "npm-run-all": "^4.1.5", - "prettier": "^2.0.4", + "prettier": "^2.1.2", "rxjs": "^6.6.2", - "standard-version": "^8.0.2", + "standard-version": "^9.0.0", "tsconfig-paths-webpack-plugin": "^3.3.0", "tslib": "^2.0.1", "tslint": "^6.1.3", - "typescript": "^3.9.7", - "yarn-deduplicate": "^2.1.1" + "typescript": "^4.0.3", + "yarn-deduplicate": "^3.0.0" } } diff --git a/src/accordion/accordion-item/accordion-item.component.ts b/src/accordion/accordion-item/accordion-item.component.ts index e244a653d..372a94853 100644 --- a/src/accordion/accordion-item/accordion-item.component.ts +++ b/src/accordion/accordion-item/accordion-item.component.ts @@ -34,7 +34,8 @@ export class AccordionItemContentDirective {} preserveWhitespaces: false, viewProviders: [AccordionItemComponent], }) -export class AccordionItemComponent extends CdkAccordionItem +export class AccordionItemComponent + extends CdkAccordionItem implements AfterContentInit { @Input() hideToggle: false; diff --git a/src/autocomplete/autocomplete.directive.ts b/src/autocomplete/autocomplete.directive.ts index 131e5fdd8..366895f69 100644 --- a/src/autocomplete/autocomplete.directive.ts +++ b/src/autocomplete/autocomplete.directive.ts @@ -34,11 +34,13 @@ import { SuggestionComponent } from './suggestion/suggestion.component'; @Directive({ selector: 'input[auiAutocomplete],textarea[auiAutocomplete]', exportAs: 'auiAutocomplete', + inputs: ['class:auiAutocompleteClass'], host: { autocomplete: 'off', }, }) -export class AutoCompleteDirective extends BaseTooltip +export class AutoCompleteDirective + extends BaseTooltip implements OnInit, OnDestroy { @Input('auiAutocomplete') get autocomplete() { @@ -54,9 +56,6 @@ export class AutoCompleteDirective extends BaseTooltip this.content = val.template; } - @Input('auiAutocompleteClass') - class: string; - @Input('auiAutocompleteFilterFn') @Input() get filterFn() { @@ -82,12 +81,6 @@ export class AutoCompleteDirective extends BaseTooltip @Output('auiAutocompleteHide') hide: EventEmitter; - readonly type: TooltipType = TooltipType.Plain; - readonly trigger: TooltipTrigger = TooltipTrigger.Focus; - readonly position = 'bottom start'; - readonly hideOnClick = true; - context: AutoCompleteContext; - private _autocomplete: AutocompleteComponent; private focusedSuggestion: SuggestionComponent; @@ -113,6 +106,10 @@ export class AutoCompleteDirective extends BaseTooltip private readonly ngControl: NgControl, ) { super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone); + this.type = TooltipType.Plain; + this.trigger = TooltipTrigger.Focus; + this.position = 'bottom start'; + this.hideOnClick = true; } ngOnInit() { diff --git a/src/checkbox/checkbox.component.ts b/src/checkbox/checkbox.component.ts index bbeec2979..388031c7b 100644 --- a/src/checkbox/checkbox.component.ts +++ b/src/checkbox/checkbox.component.ts @@ -37,7 +37,8 @@ let uniqueId = 0; }, ], }) -export class CheckboxComponent extends CommonFormControl +export class CheckboxComponent + extends CommonFormControl implements AfterViewInit, OnDestroy { id = `aui-checkbox-${uniqueId++}`; diff --git a/src/dialog/dialog.service.ts b/src/dialog/dialog.service.ts index a7ab61aab..a25fa7a16 100644 --- a/src/dialog/dialog.service.ts +++ b/src/dialog/dialog.service.ts @@ -7,7 +7,6 @@ import { import { ComponentPortal, ComponentType, - PortalInjector, TemplatePortal, } from '@angular/cdk/portal'; import { @@ -173,12 +172,21 @@ export class DialogService { config: DialogConfig, dialogRef: DialogRef, dialogIns: DialogComponent, - ): PortalInjector { + ): Injector { const userInjector = config?.viewContainerRef?.injector; - const injectionTokens = new WeakMap(); - injectionTokens.set(DialogRef, dialogRef); - injectionTokens.set(DIALOG_DATA, config.data || dialogIns); - return new PortalInjector(userInjector || this.injector, injectionTokens); + return Injector.create({ + providers: [ + { + provide: DialogRef, + useValue: dialogRef, + }, + { + provide: DIALOG_DATA, + useValue: config.data || dialogIns, + }, + ], + parent: userInjector || this.injector, + }); } private removeDialog(dialogRef: DialogRef) { diff --git a/src/dropdown/dropdown.directive.ts b/src/dropdown/dropdown.directive.ts index c023353e0..8cfe8ff15 100644 --- a/src/dropdown/dropdown.directive.ts +++ b/src/dropdown/dropdown.directive.ts @@ -25,13 +25,19 @@ import { MenuComponent } from './menu/menu.component'; @Directive({ selector: '[auiDropdown]', + exportAs: 'auiDropdown', + inputs: [ + 'class:auiDropdownClass', + 'disabled:auiDropdownDisabled', + 'position:auiDropdownPosition', + 'trigger:auiDropdownTrigger', + ], providers: [ { provide: BaseTooltip, useExisting: DropdownDirective, }, ], - exportAs: 'auiDropdown', }) export class DropdownDirective extends BaseTooltip implements OnInit { @Input('auiDropdown') @@ -50,18 +56,6 @@ export class DropdownDirective extends BaseTooltip implements OnInit { @Input('auiDropdownContext') lazyContentContext: any; - @Input('auiDropdownPosition') - position = 'bottom end'; - - @Input('auiDropdownClass') - class: string; - - @Input('auiDropdownTrigger') - trigger = TooltipTrigger.Click; - - @Input('auiDropdownDisabled') - disabled: boolean; - @Input('auiDropdownHideOnClick') hideOnClick = true; @@ -71,7 +65,6 @@ export class DropdownDirective extends BaseTooltip implements OnInit { @Output('auiDropdownHide') hide: EventEmitter; - readonly type: TooltipType = TooltipType.Plain; private _menu: MenuComponent; constructor( @@ -84,6 +77,9 @@ export class DropdownDirective extends BaseTooltip implements OnInit { ) { super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone); new DropdownActiveDirective(this, elRef, renderer).customClass = 'isActive'; + this.type = TooltipType.Plain; + this.position = 'bottom end'; + this.trigger = TooltipTrigger.Click; } ngOnInit() { diff --git a/src/dropdown/menu-item/menu-item.component.ts b/src/dropdown/menu-item/menu-item.component.ts index 450bac459..580b781a0 100644 --- a/src/dropdown/menu-item/menu-item.component.ts +++ b/src/dropdown/menu-item/menu-item.component.ts @@ -19,8 +19,16 @@ import { MenuItemType } from '../dropdown.types'; export class MenuItemComponent { bem: Bem = buildBem('aui-menu-item'); + protected _disabled = false; + @Input() - disabled = false; + get disabled() { + return this._disabled; + } + + set disabled(value) { + this._disabled = value; + } @Input() divide = false; diff --git a/src/dropdown/submenu/submenu.component.ts b/src/dropdown/submenu/submenu.component.ts index ebae1dff2..8540a136b 100644 --- a/src/dropdown/submenu/submenu.component.ts +++ b/src/dropdown/submenu/submenu.component.ts @@ -34,16 +34,10 @@ export class SubmenuComponent extends MenuItemComponent { return this._disabled || !this.hasEnabledItem; } - set disabled(val) { - this._disabled = val; - } - @ContentChildren(MenuItemComponent, { descendants: true }) menuItems: QueryList; get hasEnabledItem() { return this.menuItems?.length > 0; } - - private _disabled = false; } diff --git a/src/form/__snapshots__/form.component.spec.ts.snap b/src/form/__snapshots__/form.component.spec.ts.snap index 5c29ba640..e0b4e3452 100644 --- a/src/form/__snapshots__/form.component.spec.ts.snap +++ b/src/form/__snapshots__/form.component.spec.ts.snap @@ -48,7 +48,7 @@ exports[`FormComponent should match snapshot 1`] = ` auiformitemaddon="" class="aui-form-item__addon" > - addon + addon @@ -119,7 +119,7 @@ exports[`FormComponent should match snapshot 2`] = ` auiformitemaddon="" class="aui-form-item__addon" > - addon + addon diff --git a/src/form/form.component.spec.ts b/src/form/form.component.spec.ts index e351fed28..c851e3eba 100644 --- a/src/form/form.component.spec.ts +++ b/src/form/form.component.spec.ts @@ -51,9 +51,7 @@ describe('FormComponent', () => {
required
minlength: 3
input your name
-
- addon -
+
addon
`, diff --git a/src/icon/icon.component.html b/src/icon/icon.component.html index e90128b6f..714a57db3 100644 --- a/src/icon/icon.component.html +++ b/src/icon/icon.component.html @@ -15,8 +15,8 @@ x2="150" y2="180" > - - + + - - + + diff --git a/src/input/input-group/__snapshots__/input-group.component.spec.ts.snap b/src/input/input-group/__snapshots__/input-group.component.spec.ts.snap index 6cfbf3e16..b2a6a92e2 100644 --- a/src/input/input-group/__snapshots__/input-group.component.spec.ts.snap +++ b/src/input/input-group/__snapshots__/input-group.component.spec.ts.snap @@ -70,11 +70,11 @@ exports[`InputGroupComponent should match snapshot 1`] = ` > { @Input() precision: number; - @Input() - disabled = false; - @Input() controls = true; diff --git a/src/notification/notification.component.ts b/src/notification/notification.component.ts index 44afbffc2..36c8fb2ef 100644 --- a/src/notification/notification.component.ts +++ b/src/notification/notification.component.ts @@ -31,7 +31,8 @@ let uniqueId = 0; changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, }) -export class NotificationComponent extends MessageComponent +export class NotificationComponent + extends MessageComponent implements AfterViewInit { protected readonly animateStartState = 'flyLeft'; protected readonly animateStartEnd = 'flyUp'; diff --git a/src/select/base-select.ts b/src/select/base-select.ts index dd6507f88..96857f234 100644 --- a/src/select/base-select.ts +++ b/src/select/base-select.ts @@ -30,7 +30,8 @@ import { scrollIntoView } from '../utils/scroll-into-view'; import { OptionComponent } from './option/option.component'; import { OptionFilterFn, TrackFn } from './select.types'; -export abstract class BaseSelect extends CommonFormControl +export abstract class BaseSelect + extends CommonFormControl implements AfterContentInit, AfterViewInit, OnDestroy { @Input() get size() { diff --git a/src/select/multi-select/multi-select.component.ts b/src/select/multi-select/multi-select.component.ts index aa5489d3e..21efe07b0 100644 --- a/src/select/multi-select/multi-select.component.ts +++ b/src/select/multi-select/multi-select.component.ts @@ -52,7 +52,8 @@ import { TagClassFn } from '../select.types'; }, ], }) -export class MultiSelectComponent extends BaseSelect +export class MultiSelectComponent + extends BaseSelect implements AfterContentInit { bem: Bem = buildBem('aui-multi-select'); selectedOptions$: Observable< diff --git a/src/select/select.component.ts b/src/select/select.component.ts index c7d85c123..edc9e0911 100644 --- a/src/select/select.component.ts +++ b/src/select/select.component.ts @@ -44,7 +44,8 @@ import { OptionComponent } from './option/option.component'; }, ], }) -export class SelectComponent extends BaseSelect +export class SelectComponent + extends BaseSelect implements AfterContentInit { @ViewChild('inputRef', { static: true }) inputRef: InputComponent; diff --git a/src/sort/sort.spec.ts b/src/sort/sort.spec.ts index 4661c8cdd..8309a5765 100644 --- a/src/sort/sort.spec.ts +++ b/src/sort/sort.spec.ts @@ -161,12 +161,8 @@ type SimpleAuiSortAppColumnIds = 'defaultA' | 'defaultB' | 'overrideStart'; [direction]="direction" (sortChange)="latestSortEvent = $event" > -
- A -
-
- B -
+
A
+
B
{ })); // Note: needs to be `async` in order to fail when we expect it to. - it('should set to correct tab on fast change', async(() => { - const component = fixture.componentInstance; - component.selectedIndex = 0; - fixture.detectChanges(); - setTimeout(() => { - component.selectedIndex = 1; + it( + 'should set to correct tab on fast change', + waitForAsync(() => { + const component = fixture.componentInstance; + component.selectedIndex = 0; fixture.detectChanges(); setTimeout(() => { - component.selectedIndex = 0; + component.selectedIndex = 1; fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(component.selectedIndex).toBe(0); - }); + setTimeout(() => { + component.selectedIndex = 0; + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(component.selectedIndex).toBe(0); + }); + }, 1); }, 1); - }, 1); - })); + }), + ); it('should change tabs based on selectedIndex', fakeAsync(() => { const component = fixture.componentInstance; diff --git a/src/tooltip/base-tooltip.ts b/src/tooltip/base-tooltip.ts index f5fc62fa3..6f2f5e4be 100644 --- a/src/tooltip/base-tooltip.ts +++ b/src/tooltip/base-tooltip.ts @@ -33,14 +33,20 @@ export interface TooltipInterface { hide: EventEmitter; } -export class BaseTooltip implements TooltipInterface, AfterViewInit, OnDestroy { +export class BaseTooltip + implements TooltipInterface, AfterViewInit, OnDestroy { static readonly DELAY_TIMES = 50; set content(value: string | TemplateRef) { this.inputContent$$.next(value); } - set context(value: any) { + get context() { + return this._context; + } + + set context(value: T) { + this._context = value; this.inputContext$$.next(value); } @@ -120,6 +126,7 @@ export class BaseTooltip implements TooltipInterface, AfterViewInit, OnDestroy { protected _position = 'top'; protected _trigger = TooltipTrigger.Hover; protected _disabled = false; + protected _context: T; get isCreated() { return !!this.overlayRef; diff --git a/src/tooltip/tooltip-copy.directive.ts b/src/tooltip/tooltip-copy.directive.ts index 597ac376a..53c5d0d4a 100644 --- a/src/tooltip/tooltip-copy.directive.ts +++ b/src/tooltip/tooltip-copy.directive.ts @@ -17,6 +17,7 @@ import { TooltipCopyIntl } from './tooltip-intl'; @Directive({ selector: '[auiTooltipCopy]', + inputs: ['position:auiTooltipPosition', 'disabled:auiTooltipDisabled'], }) export class TooltipCopyDirective extends BaseTooltip implements OnInit { @Input() @@ -55,12 +56,6 @@ export class TooltipCopyDirective extends BaseTooltip implements OnInit { this._copyFailTip = value; } - @Input('auiTooltipPosition') - position: string; - - @Input('auiTooltipDisabled') - disabled: boolean; - private _copyText: string; private _copyTip: string; private _copySuccessTip: string; diff --git a/src/tooltip/tooltip.directive.ts b/src/tooltip/tooltip.directive.ts index c0bff46ec..c9894d098 100644 --- a/src/tooltip/tooltip.directive.ts +++ b/src/tooltip/tooltip.directive.ts @@ -9,12 +9,10 @@ import { NgZone, Output, Renderer2, - TemplateRef, ViewContainerRef, } from '@angular/core'; import { BaseTooltip } from './base-tooltip'; -import { TooltipTrigger, TooltipType } from './tooltip.types'; @Directive({ selector: '[auiTooltip]', @@ -26,29 +24,17 @@ import { TooltipTrigger, TooltipType } from './tooltip.types'; }, ], exportAs: 'auiTooltip', + inputs: [ + 'content:auiTooltip', + 'context:auiTooltipContext', + 'class:auiTooltipClass', + 'type:auiTooltipType', + 'position:auiTooltipPosition', + 'trigger:auiTooltipTrigger', + 'disabled:auiTooltipDisabled', + ], }) export class TooltipDirective extends BaseTooltip { - @Input('auiTooltip') - content: string | TemplateRef; - - @Input('auiTooltipContext') - context: any; - - @Input('auiTooltipClass') - class: string; - - @Input('auiTooltipType') - type: TooltipType; - - @Input('auiTooltipPosition') - position: string; - - @Input('auiTooltipTrigger') - trigger: TooltipTrigger; - - @Input('auiTooltipDisabled') - disabled: boolean; - @Input('auiTooltipHideOnClick') hideOnClick: boolean; diff --git a/stories/dialog/index.ts b/stories/dialog/index.ts index 2f9db3d00..50f0e4836 100644 --- a/stories/dialog/index.ts +++ b/stories/dialog/index.ts @@ -61,9 +61,7 @@ storiesOf('Dialog', module).add('dialog', () => {

- + diff --git a/stories/dropdown/dropdown.stories.mdx b/stories/dropdown/dropdown.stories.mdx index e13f67d23..4cf702ec0 100644 --- a/stories/dropdown/dropdown.stories.mdx +++ b/stories/dropdown/dropdown.stories.mdx @@ -31,18 +31,10 @@ import { ButtonModule, IconModule, DropdownModule } from '@alauda/ui'; 默认按钮 - - 成功按钮 - - - 警告按钮 - - - 危险按钮 - - - 禁用按钮 - + 成功按钮 + 警告按钮 + 危险按钮 + 禁用按钮 `, }} diff --git a/stories/inline-alert/inline-alert.stories.mdx b/stories/inline-alert/inline-alert.stories.mdx index cb50f6938..94f51a0af 100644 --- a/stories/inline-alert/inline-alert.stories.mdx +++ b/stories/inline-alert/inline-alert.stories.mdx @@ -26,9 +26,7 @@ import { InlineAlertModule, IconModule } from '@alauda/ui';
自定义标题 使用指令 auiInlineAlertTitle 增加标题样式
-
- 自定义内容 -
+
自定义内容
链接 diff --git a/stories/input/index.ts b/stories/input/index.ts index 3431d5115..8ee13faa1 100644 --- a/stories/input/index.ts +++ b/stories/input/index.ts @@ -17,9 +17,7 @@ storiesOf('Input', module) moduleMetadata: { imports: [InputModule, FormsModule] }, template: /* HTML */ `
-

- Input: -

+

Input:

-

- Textarea: -

+

Textarea: