feat: Menu component

.npmrc

@@ -0,0 +1 @@
+# registry=https://registry.npmmirror.com

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.html

@@ -1,11 +1,18 @@
+<!-- 
+  fix bug: button click事件点两次只触发一次
+
+  移除下列属性
+  [class.mouseDown]="isMouseDown"
+  (mousedown)="isMouseDown = true"
+  (mouseup)="isMouseDown = false"
+ -->
 <button
   [attr.id]="id"
   class="devui-btn devui-btn-{{ bsStyle }} devui-btn-{{ bsSize }} devui-btn-{{ bsPosition }}"
   [class.devui-btn-circle]="shape === 'circle'"
   [type]="type"
   [disabled]="disabled"
   [class.bordered]="bordered"
-  [class.mouseDown]="isMouseDown"
   [backdrop]="true"
   dLoading
   [showLoading]="showLoading"
@@ -14,8 +21,6 @@
   [dAutoFocus]="autofocus"
   (click)="onClick($event)"
   [ngClass]="{ 'd-btn-icon': !!icon && !hasContent(), 'd-btn-icon-wrap': !!icon }"
-  (mousedown)="isMouseDown = true"
-  (mouseup)="isMouseDown = false"
 >
   <span *ngIf="!!icon" class="devui-icon-fix icon {{ icon }}" [ngClass]="{ 'clear-right-4': hasContent() }"></span>
   <!--

devui/button/button.component.scss

@@ -284,9 +284,13 @@ $devui-btn-pseudo-config: (
     }
   }
 
-  &.mouseDown:not(:disabled) {
+  &:active:not(:disabled) {
     transform: scale(0.95);
   }
+
+  /* &.mouseDown:not(:disabled) {
+    transform: scale(0.95);
+  } */
 }
 
 .devui-loading {

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';
@@ -59,7 +59,7 @@ export class ButtonComponent implements AfterContentChecked {
   waveLeft = 0;
   waveTop = 0;
   showWave = false;
-  isMouseDown = false;
+  // isMouseDown = false;
 
   constructor(private cd: ChangeDetectorRef) {
   }

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">
+  <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;
+  }
+}