Skip to content

Commit d26efe4

Browse files
lycHublycHub
authored
feat: Menu component (#333)
* feat: add menu branch * feat: 初始化菜单文档 * feat: menu基本样式 * feat: 递归menu * feat: 折叠menu * fix: button点击两次只触发一次的bug * feat: menu animation * feat: 菜单自定义ui * fix: menu 动画bug * style: 整理menu代码 * fix: 菜单状态bug * feat: 完成菜单弹出交互 * fix: 使用takeUntilDestroyed * docs: menu demos * docs: menu api docs * fix: fix docs * fix: 嵌套menu bugs * fix: menu item click * feat: add menu branch * feat: 初始化菜单文档 * feat: menu基本样式 * feat: 递归menu * feat: 折叠menu * fix: button点击两次只触发一次的bug * feat: menu animation * feat: 菜单自定义ui * fix: menu 动画bug * style: 整理menu代码 * fix: 菜单状态bug * feat: 完成菜单弹出交互 * fix: 使用takeUntilDestroyed * docs: menu demos * docs: menu api docs * fix: fix docs * fix: 嵌套menu bugs * fix: menu item click * feat: 去掉icon动画，增加css var文档 * fix: 改文案 * fix: menu 折叠保持展开 * feat: menu样式优化，还原button组件代码 * feat: border-radius变量 * fix: menu细节优化 * fix: menn优化 * fix(menu): 优化样式，submenu加上[cdkConnectedOverlayPush] * fix(menu): menu 调整 icon-gap * fix(menu): menu title 加省略号 * fix: 还原menu以外的代码，删掉log * fix(app.component.scss): 删掉.devui-menu的class * fix(devui/package.json) 删掉 @ngrx/component
1 parent d4a7e98 commit d26efe4

Some content is hidden

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

50 files changed

+2275
-157
lines changed

‎devui-commons/src/sidebar/sidebar.component.html‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
<div class="sidebar-wrapper">
2-
<d-search
3-
class="sidebar-search-container"
4-
[iconPosition]="'left'"
5-
[styleType]="'gray'"
6-
[isKeyupSearch]="true"
7-
[placeholder]="searchPlaceholder"
8-
(searchFn)="onSearch($event)"
9-
></d-search>
2+
<d-search class="sidebar-search-container" [iconPosition]="'left'" [styleType]="'gray'" [isKeyupSearch]="true"
3+
[placeholder]="searchPlaceholder" (searchFn)="onSearch($event)"></d-search>
104
<ul class="sidebar-menu" [ngClass]="{'sidebar-menu-design': !sideMenuList.length}">
115
<li *ngFor="let item of sideMenuList" class="sidebar-menu-item" routerLinkActive="sidebar-menu-item-selected">
126
<a *ngIf="item.linkType === 'routerLink'" [routerLink]="item.path">
@@ -18,7 +12,8 @@
1812
</li>
1913
</ul>
2014
<nav class="sidebar-nav">
21-
<d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate" (itemClick)="handleResetPage()" [linkDefaultTarget]="linkDefaultTarget"></d-accordion>
15+
<d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate"
16+
(itemClick)="handleResetPage()" [linkDefaultTarget]="linkDefaultTarget"></d-accordion>
2217
<ng-template #itemtemplate let-item="item">
2318
{{ item.title }}
2419
<d-tag *ngIf="item.newChange" [tag]="text.new" [labelStyle]="'update-custom'"></d-tag>
@@ -45,4 +40,4 @@
4540
</a>
4641
</div>
4742
</div>
48-
</div>
43+
</div>

‎devui/button/button.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
2626
styleUrls: ['./button.component.scss'],
2727
changeDetection: ChangeDetectionStrategy.OnPush,
2828
preserveWhitespaces: false,
29-
})
29+
})
3030
export class ButtonComponent implements AfterContentChecked {
3131
@Input() id: string;
3232
@Input() type: IButtonType = 'button';

‎devui/devui.module.ts‎

Lines changed: 68 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { LoadingModule } from 'ng-devui/loading';
3232
import { MentionModule } from 'ng-devui/mention';
3333
import { ModalModule } from 'ng-devui/modal';
3434
import { MultiAutoCompleteModule } from 'ng-devui/multi-auto-complete';
35+
import { MenuModule } from 'ng-devui/menu';
3536
import { NavSpriteModule } from 'ng-devui/nav-sprite';
3637
import { PaginationModule } from 'ng-devui/pagination';
3738
import { PanelModule } from 'ng-devui/panel';
@@ -134,74 +135,75 @@ export * from './version';
134135
@NgModule({
135136
imports: [],
136137
exports: [
137-
AccordionModule,
138-
AlertModule,
139-
AnchorModule,
140-
AutoCompleteModule,
141-
AvatarModule,
142-
DCommonModule,
143-
BadgeModule,
144-
BackTopModule,
145-
ButtonModule,
146-
BreadcrumbModule,
147-
CardModule,
148-
CarouselModule,
149-
CheckBoxModule,
150-
DataTableModule,
151-
DatepickerModule,
152-
DragDropModule,
153-
DrawerModule,
154-
DropDownModule,
155-
EditableSelectModule,
156-
FormModule,
157-
FullscreenModule,
158-
ImagePreviewModule,
159-
LoadingModule,
160-
LayoutModule,
161-
IconModule,
162-
ModalModule,
163-
MultiAutoCompleteModule,
164-
PaginationModule,
165-
PanelModule,
166-
PopoverModule,
167-
ProgressModule,
168-
RadioModule,
169-
RateModule,
170-
SearchModule,
171-
SelectModule,
172-
StatusModule,
173-
StickyModule,
174-
TabsModule,
175-
TagsModule,
176-
TagsInputModule,
177-
ToastModule,
178-
ToggleModule,
179-
TooltipModule,
180-
TimeAxisModule,
181-
TreeModule,
182-
UploadModule,
183-
UserGuideModule,
184-
InputNumberModule,
185-
SliderModule,
186-
SplitterModule,
187-
TreeSelectModule,
188-
TransferModule,
189-
TextInputModule,
190-
TextareaModule,
191-
WindowRefModule,
192-
StepsGuideModule,
193-
GanttModule,
194-
QuadrantDiagramModule,
195-
TimePickerModule,
196-
CascaderModule,
197-
CategorySearchModule,
198-
DatepickerProModule,
199-
MentionModule,
200-
NavSpriteModule,
201-
ReadTipModule
138+
AccordionModule,
139+
AlertModule,
140+
AnchorModule,
141+
AutoCompleteModule,
142+
AvatarModule,
143+
DCommonModule,
144+
BadgeModule,
145+
BackTopModule,
146+
ButtonModule,
147+
BreadcrumbModule,
148+
CardModule,
149+
CarouselModule,
150+
CheckBoxModule,
151+
DataTableModule,
152+
DatepickerModule,
153+
DragDropModule,
154+
DrawerModule,
155+
DropDownModule,
156+
EditableSelectModule,
157+
FormModule,
158+
FullscreenModule,
159+
ImagePreviewModule,
160+
LoadingModule,
161+
LayoutModule,
162+
IconModule,
163+
ModalModule,
164+
MultiAutoCompleteModule,
165+
MenuModule,
166+
PaginationModule,
167+
PanelModule,
168+
PopoverModule,
169+
ProgressModule,
170+
RadioModule,
171+
RateModule,
172+
SearchModule,
173+
SelectModule,
174+
StatusModule,
175+
StickyModule,
176+
TabsModule,
177+
TagsModule,
178+
TagsInputModule,
179+
ToastModule,
180+
ToggleModule,
181+
TooltipModule,
182+
TimeAxisModule,
183+
TreeModule,
184+
UploadModule,
185+
UserGuideModule,
186+
InputNumberModule,
187+
SliderModule,
188+
SplitterModule,
189+
TreeSelectModule,
190+
TransferModule,
191+
TextInputModule,
192+
TextareaModule,
193+
WindowRefModule,
194+
StepsGuideModule,
195+
GanttModule,
196+
QuadrantDiagramModule,
197+
TimePickerModule,
198+
CascaderModule,
199+
CategorySearchModule,
200+
DatepickerProModule,
201+
MentionModule,
202+
NavSpriteModule,
203+
ReadTipModule
202204
],
203205
declarations: [],
204-
})
206+
})
205207
export class DevUIModule {
206208
static forRoot(): ModuleWithProviders<DevUIModule> {
207209
return {

‎devui/menu/demo/auto-expand/auto-expand.component.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="demo-menu" style="width: 256px">
2+
<div d-menu>
3+
<ng-container *ngFor="let m of menus; trackBy: trackByMenu">
4+
<div
5+
d-sub-menu
6+
[title]="m.name"
7+
[icon]="m.icon"
8+
[open]="openKeys.includes(m.key)"
9+
(openChange)="openChange($event, m.key)"
10+
*ngIf="m.children?.length; else leafTpl"
11+
>
12+
<div
13+
d-menu-item
14+
(itemClick)="itemClick(item.key)"
15+
[active]="item.key === activeKey"
16+
*ngFor="let item of m.children; trackBy: trackByMenu"
17+
>
18+
<d-icon class="devui-menu-item-icon" icon="icon-op-list" />
19+
<span class="devui-menu-item-name">{{ item.name }}</span>
20+
</div>
21+
</div>
22+
<ng-template #leafTpl>
23+
<div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey">
24+
<d-icon class="devui-menu-item-icon" icon="icon-op-list" />
25+
<span class="devui-menu-item-name over-flow-ellipsis">{{ m.name }}</span>
26+
</div>
27+
</ng-template>
28+
</ng-container>
29+
</div>
30+
</div>

‎devui/menu/demo/auto-expand/auto-expand.component.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
2+
import { MenuItemType } from 'ng-devui/menu';
3+
4+
const MENUS: MenuItemType[] = [
5+
{
6+
key: 'c-1',
7+
icon: 'icon-more-func',
8+
name: 'Content 1 (as a leaf menu)'
9+
},
10+
{
11+
key: 'c-2',
12+
name: 'Content 2 (as a parent menu, has children)',
13+
icon: 'icon-more-func',
14+
children: [
15+
{
16+
key: 'c-2-1',
17+
name: 'Content 2 Child 1'
18+
},
19+
{
20+
key: 'c-2-2',
21+
name: 'Content 2 Child 2'
22+
},
23+
{
24+
key: 'c-2-3',
25+
name: 'Content 2 Child 3'
26+
},
27+
]
28+
}, {
29+
key: 'c-3',
30+
name: 'Content 3 (as a parent menu, has children)',
31+
icon: 'icon-more-func',
32+
children: [
33+
{
34+
key: 'c-3-1',
35+
name: 'Content 3 Child 1'
36+
},
37+
{
38+
key: 'c-3-2',
39+
name: 'Content 3 Child 2',
40+
},
41+
{
42+
key: 'c-3-3',
43+
name: 'Content 3 Child 3',
44+
},
45+
{
46+
key: 'c-3-4',
47+
name: 'Content 3 Child 4',
48+
},
49+
]
50+
},
51+
{
52+
key: 'c-4',
53+
icon: 'icon-more-func',
54+
name: 'Content 4 (as a leaf menu)',
55+
}
56+
];
57+
58+
function findAllParent(source: MenuItemType[], key: string) {
59+
const result: string[] = [];
60+
const loop = (list: MenuItemType[]) => {
61+
for (const item of list) {
62+
if (item.key === key) {
63+
// parentKeys.unshift(key);
64+
return true;
65+
}
66+
if (item.children?.length) {
67+
const t = loop(item.children);
68+
if (t) {
69+
result.unshift(item.key);
70+
return true;
71+
}
72+
}
73+
}
74+
};
75+
loop(source);
76+
return result;
77+
}
78+
79+
80+
@Component({
81+
selector: 'd-auto-expand',
82+
templateUrl: './auto-expand.component.html',
83+
changeDetection: ChangeDetectionStrategy.OnPush,
84+
})
85+
export class AutoExpandComponent implements OnInit {
86+
menus = MENUS;
87+
openKeys: string[] = [];
88+
activeKey = 'c-3-2';
89+
90+
openChange(open: boolean, key: string) {
91+
if (open) {
92+
this.openKeys.push(key);
93+
} else {
94+
this.openKeys = this.openKeys.filter(item => item !== key);
95+
}
96+
}
97+
98+
ngOnInit() {
99+
this.openKeys = findAllParent(this.menus, this.activeKey);
100+
}
101+
itemClick(key: string) {
102+
this.activeKey = key;
103+
}
104+
105+
trackByMenu(_: number, item: MenuItemType) {
106+
return item.key;
107+
}
108+
}

‎devui/menu/demo/basic/basic.component.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="demo-menu" style="width: 256px">
2+
<div d-menu (menuItemClick)="menuItemClick($event)">
3+
<ng-container *ngFor="let m of menus; trackBy: trackByMenu">
4+
<div
5+
d-sub-menu
6+
[title]="m.name"
7+
[icon]="m.icon"
8+
[disabled]="disabledKeys.includes(m.key)"
9+
[open]="openKeys.includes(m.key)"
10+
(openChange)="openChange($event, m.key)"
11+
*ngIf="m.children?.length; else leafTpl"
12+
>
13+
<div
14+
d-menu-item
15+
[disabled]="disabledKeys.includes(item.key)"
16+
(itemClick)="itemClick(item.key)"
17+
[active]="item.key === activeKey"
18+
*ngFor="let item of m.children; trackBy: trackByMenu"
19+
>
20+
<d-icon class="devui-menu-item-icon" icon="icon-op-list" />
21+
<span class="devui-menu-item-name over-flow-ellipsis">{{ item.name }}</span>
22+
</div>
23+
</div>
24+
<ng-template #leafTpl>
25+
<div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey" [disabled]="disabledKeys.includes(m.key)">
26+
<d-icon class="devui-menu-item-icon" icon="icon-op-list" />
27+
<span class="devui-menu-item-name over-flow-ellipsis">{{ m.name }}</span>
28+
</div>
29+
</ng-template>
30+
</ng-container>
31+
</div>
32+
</div>

0 commit comments

Comments
 (0)