feat: Menu component

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

@@ -1,12 +1,6 @@
 <div class="sidebar-wrapper">
-  <d-search
-    class="sidebar-search-container"
-    [iconPosition]="'left'"
-    [styleType]="'gray'"
-    [isKeyupSearch]="true"
-    [placeholder]="searchPlaceholder"
-    (searchFn)="onSearch($event)"
-  ></d-search>
+  <d-search class="sidebar-search-container" [iconPosition]="'left'" [styleType]="'gray'" [isKeyupSearch]="true"
+    [placeholder]="searchPlaceholder" (searchFn)="onSearch($event)"></d-search>
   <ul class="sidebar-menu" [ngClass]="{'sidebar-menu-design': !sideMenuList.length}">
     <li *ngFor="let item of sideMenuList" class="sidebar-menu-item" routerLinkActive="sidebar-menu-item-selected">
       <a *ngIf="item.linkType === 'routerLink'" [routerLink]="item.path">
@@ -18,7 +12,8 @@
     </li>
   </ul>
   <nav class="sidebar-nav">
-    <d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate" (itemClick)="handleResetPage()" [linkDefaultTarget]="linkDefaultTarget"></d-accordion>
+    <d-accordion [data]="componentsDataDisplay" [linkType]="linkType" [itemTemplate]="itemtemplate"
+      (itemClick)="handleResetPage()" [linkDefaultTarget]="linkDefaultTarget"></d-accordion>
     <ng-template #itemtemplate let-item="item">
       {{ item.title }}
       <d-tag *ngIf="item.newChange" [tag]="text.new" [labelStyle]="'update-custom'"></d-tag>
@@ -45,4 +40,4 @@
       </a>
     </div>
   </div>
-</div>
+</div>

devui/button/button.component.ts

@@ -26,7 +26,7 @@ export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
   styleUrls: ['./button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
-})
+  })
 export class ButtonComponent implements AfterContentChecked {
   @Input() id: string;
   @Input() type: IButtonType = 'button';

devui/devui.module.ts

@@ -32,6 +32,7 @@ import { LoadingModule } from 'ng-devui/loading';
 import { MentionModule } from 'ng-devui/mention';
 import { ModalModule } from 'ng-devui/modal';
 import { MultiAutoCompleteModule } from 'ng-devui/multi-auto-complete';
+import { MenuModule } from 'ng-devui/menu';
 import { NavSpriteModule } from 'ng-devui/nav-sprite';
 import { PaginationModule } from 'ng-devui/pagination';
 import { PanelModule } from 'ng-devui/panel';
@@ -134,74 +135,75 @@ export * from './version';
 @NgModule({
   imports: [],
   exports: [
-    AccordionModule,
-    AlertModule,
-    AnchorModule,
-    AutoCompleteModule,
-    AvatarModule,
-    DCommonModule,
-    BadgeModule,
-    BackTopModule,
-    ButtonModule,
-    BreadcrumbModule,
-    CardModule,
-    CarouselModule,
-    CheckBoxModule,
-    DataTableModule,
-    DatepickerModule,
-    DragDropModule,
-    DrawerModule,
-    DropDownModule,
-    EditableSelectModule,
-    FormModule,
-    FullscreenModule,
-    ImagePreviewModule,
-    LoadingModule,
-    LayoutModule,
-    IconModule,
-    ModalModule,
-    MultiAutoCompleteModule,
-    PaginationModule,
-    PanelModule,
-    PopoverModule,
-    ProgressModule,
-    RadioModule,
-    RateModule,
-    SearchModule,
-    SelectModule,
-    StatusModule,
-    StickyModule,
-    TabsModule,
-    TagsModule,
-    TagsInputModule,
-    ToastModule,
-    ToggleModule,
-    TooltipModule,
-    TimeAxisModule,
-    TreeModule,
-    UploadModule,
-    UserGuideModule,
-    InputNumberModule,
-    SliderModule,
-    SplitterModule,
-    TreeSelectModule,
-    TransferModule,
-    TextInputModule,
-    TextareaModule,
-    WindowRefModule,
-    StepsGuideModule,
-    GanttModule,
-    QuadrantDiagramModule,
-    TimePickerModule,
-    CascaderModule,
-    CategorySearchModule,
-    DatepickerProModule,
-    MentionModule,
-    NavSpriteModule,
-    ReadTipModule
+  AccordionModule,
+  AlertModule,
+  AnchorModule,
+  AutoCompleteModule,
+  AvatarModule,
+  DCommonModule,
+  BadgeModule,
+  BackTopModule,
+  ButtonModule,
+  BreadcrumbModule,
+  CardModule,
+  CarouselModule,
+  CheckBoxModule,
+  DataTableModule,
+  DatepickerModule,
+  DragDropModule,
+  DrawerModule,
+  DropDownModule,
+  EditableSelectModule,
+  FormModule,
+  FullscreenModule,
+  ImagePreviewModule,
+  LoadingModule,
+  LayoutModule,
+  IconModule,
+  ModalModule,
+  MultiAutoCompleteModule,
+  MenuModule,
+  PaginationModule,
+  PanelModule,
+  PopoverModule,
+  ProgressModule,
+  RadioModule,
+  RateModule,
+  SearchModule,
+  SelectModule,
+  StatusModule,
+  StickyModule,
+  TabsModule,
+  TagsModule,
+  TagsInputModule,
+  ToastModule,
+  ToggleModule,
+  TooltipModule,
+  TimeAxisModule,
+  TreeModule,
+  UploadModule,
+  UserGuideModule,
+  InputNumberModule,
+  SliderModule,
+  SplitterModule,
+  TreeSelectModule,
+  TransferModule,
+  TextInputModule,
+  TextareaModule,
+  WindowRefModule,
+  StepsGuideModule,
+  GanttModule,
+  QuadrantDiagramModule,
+  TimePickerModule,
+  CascaderModule,
+  CategorySearchModule,
+  DatepickerProModule,
+  MentionModule,
+  NavSpriteModule,
+  ReadTipModule
   ],
   declarations: [],
-})
+  })
 export class DevUIModule {
   static forRoot(): ModuleWithProviders<DevUIModule> {
     return {

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

@@ -0,0 +1,30 @@
+<div class="demo-menu" style="width: 256px">
+  <div d-menu>
+    <ng-container *ngFor="let m of menus; trackBy: trackByMenu">
+      <div
+        d-sub-menu
+        [title]="m.name"
+        [icon]="m.icon"
+        [open]="openKeys.includes(m.key)"
+        (openChange)="openChange($event, m.key)"
+        *ngIf="m.children?.length; else leafTpl"
+      >
+        <div
+          d-menu-item
+          (itemClick)="itemClick(item.key)"
+          [active]="item.key === activeKey"
+          *ngFor="let item of m.children; trackBy: trackByMenu"
+        >
+          <d-icon class="devui-menu-item-icon" icon="icon-op-list" />
+          <span class="devui-menu-item-name">{{ item.name }}</span>
+        </div>
+      </div>
+      <ng-template #leafTpl>
+        <div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey">
+          <d-icon class="devui-menu-item-icon" icon="icon-op-list" />
+          <span class="devui-menu-item-name over-flow-ellipsis">{{ m.name }}</span>
+        </div>
+      </ng-template>
+    </ng-container>
+  </div>
+</div>

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

@@ -0,0 +1,108 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { MenuItemType } from 'ng-devui/menu';
+
+const MENUS: MenuItemType[] = [
+  {
+    key: 'c-1',
+    icon: 'icon-more-func',
+    name: 'Content 1 (as a leaf menu)'
+  },
+  {
+    key: 'c-2',
+    name: 'Content 2 (as a parent menu, has children)',
+    icon: 'icon-more-func',
+    children: [
+      {
+        key: 'c-2-1',
+        name: 'Content 2 Child 1'
+      },
+      {
+        key: 'c-2-2',
+        name: 'Content 2 Child 2'
+      },
+      {
+        key: 'c-2-3',
+        name: 'Content 2 Child 3'
+      },
+    ]
+  }, {
+    key: 'c-3',
+    name: 'Content 3 (as a parent menu, has children)',
+    icon: 'icon-more-func',
+    children: [
+      {
+        key: 'c-3-1',
+        name: 'Content 3 Child 1'
+      },
+      {
+        key: 'c-3-2',
+        name: 'Content 3 Child 2',
+      },
+      {
+        key: 'c-3-3',
+        name: 'Content 3 Child 3',
+      },
+      {
+        key: 'c-3-4',
+        name: 'Content 3 Child 4',
+      },
+    ]
+  },
+  {
+    key: 'c-4',
+    icon: 'icon-more-func',
+    name: 'Content 4 (as a leaf menu)',
+  }
+];
+
+function findAllParent(source: MenuItemType[], key: string) {
+  const result: string[] = [];
+  const loop = (list: MenuItemType[]) => {
+    for (const item of list) {
+      if (item.key === key) {
+        // parentKeys.unshift(key);
+        return true;
+      }
+      if (item.children?.length) {
+        const t = loop(item.children);
+        if (t) {
+          result.unshift(item.key);
+          return true;
+        }
+      }
+    }
+  };
+  loop(source);
+  return result;
+}
+
+
+@Component({
+  selector: 'd-auto-expand',
+  templateUrl: './auto-expand.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  })
+export class AutoExpandComponent implements OnInit {
+  menus = MENUS;
+  openKeys: string[] = [];
+  activeKey = 'c-3-2';
+
+  openChange(open: boolean, key: string) {
+    if (open) {
+      this.openKeys.push(key);
+    } else {
+      this.openKeys = this.openKeys.filter(item => item !== key);
+    }
+  }
+
+  ngOnInit() {
+    this.openKeys = findAllParent(this.menus, this.activeKey);
+  }
+  itemClick(key: string) {
+    this.activeKey = key;
+  }
+
+  trackByMenu(_: number, item: MenuItemType) {
+    return item.key;
+  }
+}

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

@@ -0,0 +1,32 @@
+<div class="demo-menu" style="width: 256px">
+  <div d-menu (menuItemClick)="menuItemClick($event)">
+    <ng-container *ngFor="let m of menus; trackBy: trackByMenu">
+      <div
+        d-sub-menu
+        [title]="m.name"
+        [icon]="m.icon"
+        [disabled]="disabledKeys.includes(m.key)"
+        [open]="openKeys.includes(m.key)"
+        (openChange)="openChange($event, m.key)"
+        *ngIf="m.children?.length; else leafTpl"
+      >
+        <div
+          d-menu-item
+          [disabled]="disabledKeys.includes(item.key)"
+          (itemClick)="itemClick(item.key)"
+          [active]="item.key === activeKey"
+          *ngFor="let item of m.children; trackBy: trackByMenu"
+        >
+          <d-icon class="devui-menu-item-icon" icon="icon-op-list" />
+          <span class="devui-menu-item-name over-flow-ellipsis">{{ item.name }}</span>
+        </div>
+      </div>
+      <ng-template #leafTpl>
+        <div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey" [disabled]="disabledKeys.includes(m.key)">
+          <d-icon class="devui-menu-item-icon" icon="icon-op-list" />
+          <span class="devui-menu-item-name over-flow-ellipsis">{{ m.name }}</span>
+        </div>
+      </ng-template>
+    </ng-container>
+  </div>
+</div>