Skip to content

Commit 637ca0e

Browse files
huaweidevcloudhuaweidevcloud
committed
chore(release): release 9.0.0-beta.1
1 parent 998b910 commit 637ca0e

File tree

498 files changed

+7227
-1744
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

498 files changed

+7227
-1744
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ To see more in [devui.design](https://devui.design/home).
2323

2424
## Angular Support
2525

26-
Now supports Angular <font color=red>`^8.0.0`</font>
26+
Now supports Angular <font color=red>`^9.0.0`</font>
2727

2828
## Getting Started
2929

‎README_zh_CN.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ DevUI Design设计系统包含了DevUI规则、设计语言和最佳实践的资
2323

2424
## Angular版本
2525

26-
当前支持的angular版本<font color=red>`^8.0.0`</font>
26+
当前支持的angular版本<font color=red>`^9.0.0`</font>
2727

2828
## 快速开始
2929

‎angular.json

+5
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,11 @@
148148
"options": {
149149
"tsConfig": "devui/tsconfig.lib.json",
150150
"project": "devui/ng-package.json"
151+
},
152+
"configurations": {
153+
"production": {
154+
"tsConfig": "devui/tsconfig.lib.prod.json"
155+
}
151156
}
152157
},
153158
"test": {

‎devui/accordion/accordion-base-component.class.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { Input, HostBinding } from '@angular/core';
1+
import { Input, HostBinding, Directive } from '@angular/core';
22
import { AccordionBase, AccordionOptions } from './accordion.type';
33

4+
@Directive()
45
export abstract class AccordionBaseComponent<T extends AccordionBase> {
56
@Input() item: any | T;
67
@Input() deepth = 0;

‎devui/accordion/accordion-base-item-component.class.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { HostBinding } from '@angular/core';
1+
import { HostBinding, Directive } from '@angular/core';
22
import { AccordionBaseItem, AccordionOptions } from './accordion.type';
33
import { AccordionBaseComponent } from './accordion-base-component.class';
44

5+
@Directive()
56
export abstract class AccordionBaseItemComponent<T extends AccordionBaseItem> extends AccordionBaseComponent<T> {
67
get itemTemplate() {
78
return this.accordion.itemTemplate;

‎devui/accordion/accordion-base-link-component.class.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { HostListener } from '@angular/core';
1+
import { HostListener, Directive } from '@angular/core';
22
import { AccordionLinkableItem, AccordionOptions } from './accordion.type';
33
import { AccordionBaseItemComponent } from './accordion-base-item-component.class';
44

5+
@Directive()
56
export abstract class AccordionBaseLinkComponent extends AccordionBaseItemComponent<AccordionLinkableItem> {
67
get link() {
78
return this.item && this.item[this.accordion.linkKey];

‎devui/accordion/accordion-item-hreflink.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ng-container *ngIf="!disabled">
2-
<a href="{{ link }}" target="{{ target }}" rel="noopener" title="{{ title }}">
2+
<a class="devui-over-flow-ellipsis" href="{{ link }}" target="{{ target }}" rel="noopener" title="{{ title }}">
33
<ng-container *ngIf="!itemTemplate">
44
{{ title }}
55
</ng-container>
@@ -15,7 +15,7 @@
1515
</a>
1616
</ng-container>
1717
<ng-container *ngIf="disabled">
18-
<a title="{{ title }}">
18+
<a class="devui-over-flow-ellipsis" title="{{ title }}">
1919
<ng-container *ngIf="!itemTemplate">
2020
{{ title }}
2121
</ng-container>

‎devui/accordion/accordion-item-routerlink.component.html

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<ng-container *ngIf="!disabled">
2-
<a [routerLink]="link" [routerLinkActive]="'devui-router-active'" target="{{ target }}" rel="noopener" title="{{ title }}">
2+
<a
3+
class="devui-over-flow-ellipsis"
4+
[routerLink]="path"
5+
[queryParams]="queryParams"
6+
[fragment]="fragment"
7+
[routerLinkActive]="'devui-router-active'"
8+
target="{{ target }}"
9+
rel="noopener"
10+
title="{{ title }}"
11+
>
312
<ng-container *ngIf="!itemTemplate">
413
{{ title }}
514
</ng-container>
@@ -15,7 +24,7 @@
1524
</a>
1625
</ng-container>
1726
<ng-container *ngIf="disabled">
18-
<a title="{{ title }}">
27+
<a class="devui-over-flow-ellipsis" title="{{ title }}">
1928
<ng-container *ngIf="!itemTemplate">
2029
{{ title }}
2130
</ng-container>

‎devui/accordion/accordion-item-routerlink.component.ts

+37-4
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
11
import { AccordionComponent } from './accordion.component';
2-
import { Component, ViewEncapsulation, HostBinding, ViewChild, HostListener} from '@angular/core';
2+
import { Component, ViewEncapsulation, HostBinding, ViewChild, HostListener, SimpleChanges, OnChanges} from '@angular/core';
33
import { AccordionBaseLinkComponent } from './accordion-base-link-component.class';
4-
import { RouterLinkActive, Router } from '@angular/router';
4+
import { RouterLinkActive, Router, UrlTree, Params } from '@angular/router';
55

66
@Component({
77
selector: 'd-accordion-item-routerlink',
88
templateUrl: './accordion-item-routerlink.component.html',
99
encapsulation: ViewEncapsulation.None,
1010
})
11-
export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent {
12-
@ViewChild(RouterLinkActive, { static: false }) routerLinkActiveDirective: RouterLinkActive;
11+
export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent implements OnChanges {
12+
@ViewChild(RouterLinkActive) routerLinkActiveDirective: RouterLinkActive;
1313
@HostBinding('class.devui-router-active')
1414
get routerLinkActived(): boolean {
1515
return !!(this.routerLinkActiveDirective && this.routerLinkActiveDirective.isActive);
1616
}
17+
private set urlTree(urlTree: UrlTree) {
18+
if (urlTree) {
19+
this.queryParams = urlTree.queryParams;
20+
this.fragment = urlTree.fragment;
21+
} else {
22+
this.queryParams = undefined;
23+
this.fragment = undefined;
24+
}
25+
}
26+
27+
public path: string;
28+
public queryParams: Params;
29+
public fragment: string;
1730

1831
constructor(protected accordion: AccordionComponent, private router: Router) {
1932
super(accordion);
@@ -29,4 +42,24 @@ export class AccordionItemRouterlinkComponent extends AccordionBaseLinkComponent
2942
});
3043
}
3144
}
45+
46+
ngOnChanges(changes: SimpleChanges): void {
47+
if (changes['item']) {
48+
if (this.link) {
49+
this.urlTree = this.router.parseUrl(this.link);
50+
const handelPath = (url: string) => {
51+
let path = url;
52+
const index = url.indexOf('?');
53+
if (index > -1) {
54+
path = url.slice(0, index);
55+
}
56+
return path;
57+
};
58+
this.path = handelPath(this.link);
59+
} else {
60+
this.urlTree = undefined;
61+
this.path = undefined;
62+
}
63+
}
64+
}
3265
}

‎devui/accordion/accordion.component.scss

+31-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
:host {
55
display: block;
66
}
7+
78
:host ::ng-deep d-accordion-menu,
89
:host ::ng-deep d-accordion-item,
910
:host ::ng-deep d-accordion-item-hreflink,
@@ -19,22 +20,26 @@
1920
box-shadow: 0 1px 2px 0 $dark-1-boxshadow;
2021
width: 100%;
2122
overflow-y: auto;
23+
2224
& > .devui-accordion-list > .devui-accordion-item {
2325
& > .devui-accordion-menu-item > .devui-accordion-item-title,
2426
& > .devui-accordion-item-title {
2527
font-weight: 700;
2628
}
2729
}
30+
2831
.devui-over-flow-ellipsis {
2932
overflow: hidden;
3033
white-space: nowrap;
3134
text-overflow: ellipsis;
3235
}
3336
}
37+
3438
:host ::ng-deep .devui-accordion-submenu {
3539
background: $bg-white;
3640
width: 100%;
3741
}
42+
3843
/* 单行菜单 */
3944
:host ::ng-deep .devui-accordion-item-title {
4045
display: block;
@@ -46,39 +51,51 @@
4651
color: $dark-1;
4752
background: transparent;
4853
cursor: pointer;
54+
4955
&.disabled {
50-
opacity: 0.3;
51-
cursor: default;
56+
color: $disabled-content;
57+
cursor: not-allowed;
58+
59+
& > a {
60+
color: $disabled-content;
61+
}
5262
}
63+
5364
&:not(.disabled) {
5465
&:hover {
5566
background: $hover-content;
5667
}
68+
5769
&.devui-router-active,
5870
&.active {
5971
color: $brand-1;
6072
background: $brand-3;
73+
6174
& > a {
6275
color: $brand-1;
6376
}
6477
}
6578
}
79+
6680
& > a {
6781
text-decoration: none;
6882
display: block;
6983
width: 100%;
7084
color: $dark-1;
85+
7186
&:hover {
7287
color: inherit;
7388
text-decoration: none;
7489
}
7590
}
7691
}
92+
7793
/* 解决链接可点击区域大小不是100%宽度问题 */
7894
:host ::ng-deep d-accordion-item-hreflink,
7995
:host ::ng-deep d-accordion-item-routerlink {
8096
&.devui-accordion-item-title {
8197
padding: 0;
98+
8299
& > a {
83100
padding: 0 10px 0 20px;
84101
}
@@ -88,41 +105,51 @@
88105
/* 展开图标相关 */
89106
:host ::ng-deep .devui-accordion-menu-item > .devui-accordion-item-title {
90107
position: relative;
108+
91109
& > .devui-accordion-open-icon {
92110
display: inline-block;
93111
text-indent: 0;
94-
pointer-events: none; /*让鼠标穿透*/
112+
pointer-events: none; /* 让鼠标穿透 */
95113
position: absolute;
96114
right: 10px;
97115
top: 12px;
98116
width: 16px;
99117
height: 16px;
100118
line-height: 16px;
101119
transition: transform ease-out 300ms;
120+
102121
& > svg {
103122
width: 16px;
104123
height: 16px;
124+
105125
polygon {
106126
fill: $dark-1;
107127
}
108128
}
109129
}
130+
110131
&:not(.open) > .devui-accordion-open-icon {
111132
transform: rotate(-90deg);
112133
transform-origin: center;
113134
}
135+
114136
&.disabled > .devui-accordion-open-icon {
115-
opacity: 0.3;
137+
svg polygon {
138+
fill: $disabled-content;
139+
}
116140
}
117141
}
142+
118143
/* 可展开的菜单 */
119144
:host ::ng-deep .devui-accordion-menu-item > .devui-accordion-item-title {
120145
padding-right: 30px;
146+
121147
&.active {
122148
color: $brand-1;
123149
background: transparent;
124150
}
125151
}
152+
126153
:host ::ng-deep d-accordion-list.devui-accordion-menu-hidden {
127154
display: none;
128155
}

‎devui/accordion/demo/accordion-demo.component.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<div class="demo-container">
2-
<div class="demo-example">
1+
<div class="demo-container" dAnchorBox [view]="{ top: 60, bottom: 0 }">
2+
<d-demo-nav [navItems]="navItems"></d-demo-nav>
3+
<div [dAnchor]="'basic-usage'" class="demo-example">
34
<div class="demo-title">基本用法</div>
45
<div class="demo-text">
56
传入菜单，监听含子项的可展开菜单的开合事件(menuToggle)或可点击菜单的点击事件(itemClick)。<br />
@@ -10,7 +11,7 @@
1011
<d-basic demo></d-basic>
1112
</d-codebox>
1213
</div>
13-
<div class="demo-example">
14+
<div [dAnchor]="'use-built-in-routing-and-link-types'" class="demo-example">
1415
<div class="demo-title">使用内置路由和链接类型</div>
1516
<div class="demo-text">
1617
通过设置linkType切换不同的内置路由和链接类型：默认类型''；
@@ -20,7 +21,7 @@
2021
<d-link demo></d-link>
2122
</d-codebox>
2223
</div>
23-
<div class="demo-example">
24+
<div [dAnchor]="'using-templates'" class="demo-example">
2425
<div class="demo-title">使用模板</div>
2526
<div class="demo-text">
2627
可展开菜单和可点击菜单分别使用模板。可展开菜单指定menuItemTemplate，可点击菜单指定itemTemplate。<br />
@@ -38,7 +39,7 @@
3839
</d-codebox>
3940
</div>
4041

41-
<div class="demo-example">
42+
<div [dAnchor]="'compound-level-and-auto-expand'" class="demo-example">
4243
<div class="demo-title">复合层级和自动展开</div>
4344
<div class="demo-text">
4445
支持多层级和不限制嵌套层级。可以独立使用autoOpenActiveMenu使得激活的菜单的父层级自动展开。
@@ -47,7 +48,7 @@
4748
<d-multi-level demo></d-multi-level>
4849
</d-codebox>
4950
</div>
50-
<div class="demo-example">
51+
<div [dAnchor]="'change-values'" class="demo-example">
5152
<div class="demo-title">改变键值</div>
5253
<div class="demo-text">
5354
通过titleKey, childrenKey, disabledKey, activeKey等等改变数组键值，适配不同的接口类型定义。

‎devui/accordion/demo/accordion-demo.component.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,11 @@ export class AccordionDemoComponent {
4444
code: require('!!raw-loader!./change-key/change-key.component.ts')},
4545
{title: 'CSS', language: 'css', code: require('!!raw-loader!./change-key/change-key.component.css')}
4646
];
47-
47+
navItems = [
48+
{ dAnchorLink: 'basic-usage', value: '基本用法'},
49+
{ dAnchorLink: 'use-built-in-routing-and-link-types', value: '内置路由和链接类型'},
50+
{ dAnchorLink: 'using-templates', value: '使用模板'},
51+
{ dAnchorLink: 'compound-level-and-auto-expand', value: '复合层级和自动展开'},
52+
{ dAnchorLink: 'change-values', value: '改变键值'}
53+
];
4854
}

‎devui/accordion/demo/accordion-demo.moudule.ts

+2
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ import { DevUIApiComponent } from 'ng-devui/shared/devui-api/devui-api.component
1515
import { DevUIApiModule } from 'ng-devui/shared/devui-api/devui-api.module';
1616
import { DevUICodeboxModule } from 'ng-devui/shared/devui-codebox';
1717
import { ToggleModule } from 'ng-devui/toggle';
18+
import { DDemoNavModule } from 'src/app/component/d-demo-nav.module';
1819

1920
@NgModule({
2021
imports: [
22+
DDemoNavModule,
2123
CommonModule,
2224
AccordionModule,
2325
ToggleModule,

‎devui/accordion/demo/basic/basic.component.css

+3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
.menu {
22
width: 200px;
33
}
4+
45
.option {
56
line-height: 20px;
67
vertical-align: middle;
78
margin-top: 20px;
89
}
10+
911
.option > d-toggle {
1012
display: inline-block;
1113
transform: translateY(3px);
1214
}
15+
1316
@media (max-width: 250px) {
1417
.menu {
1518
width: 80%;

0 commit comments

Comments
 (0)