fix(menu): 指令、标签、host规范化

DevCloudFE · Nov 6, 2023 · e63d68e · e63d68e
1 parent d42e509
commit e63d68e
Show file tree

Hide file tree

Showing 16 changed files with 79 additions and 78 deletions.
diff --git a/devui/menu/demo/auto-expand/auto-expand.component.html b/devui/menu/demo/auto-expand/auto-expand.component.html
@@ -1,16 +1,16 @@
 <div class="demo-menu" style="width: 256px">
-  <div d-menu>
+  <div dMenu>
     <ng-container *ngFor="let m of menus; trackBy: trackByMenu">
       <div
-        d-sub-menu
+        dSubMenu
         [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
+          dMenuItem
           (itemClick)="itemClick(item.key)"
           [active]="item.key === activeKey"
           *ngFor="let item of m.children; trackBy: trackByMenu"
@@ -20,7 +20,7 @@
         </div>
       </div>
       <ng-template #leafTpl>
-        <div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey">
+        <div dMenuItem (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>

diff --git a/devui/menu/demo/basic/basic.component.html b/devui/menu/demo/basic/basic.component.html
@@ -1,8 +1,8 @@
 <div class="demo-menu" style="width: 256px">
-  <div d-menu (menuItemClick)="menuItemClick($event)">
+  <div dMenu (menuItemClick)="menuItemClick($event)">
     <ng-container *ngFor="let m of menus; trackBy: trackByMenu">
       <div
-        d-sub-menu
+        dSubMenu
         [title]="m.name"
         [icon]="m.icon"
         [disabled]="disabledKeys.includes(m.key)"
@@ -11,7 +11,7 @@
         *ngIf="m.children?.length; else leafTpl"
       >
         <div
-          d-menu-item
+          dMenuItem
           [disabled]="disabledKeys.includes(item.key)"
           (itemClick)="itemClick(item.key)"
           [active]="item.key === activeKey"
@@ -22,7 +22,7 @@
         </div>
       </div>
       <ng-template #leafTpl>
-        <div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey" [disabled]="disabledKeys.includes(m.key)">
+        <div dMenuItem (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>

diff --git a/devui/menu/demo/custom-node/custom-node.component.html b/devui/menu/demo/custom-node/custom-node.component.html
@@ -1,9 +1,9 @@
 <div class="demo-menu" style="width: 256px">
-  <div d-menu>
+  <div dMenu>
     <ng-container *ngFor="let m of menus; trackBy: trackByMenu">
       <!-- [noStyle]="true" 会完全移除预制样式 -->
       <div
-        d-sub-menu
+        dSubMenu
         [title]="titleTpl"
         [icon]="m.icon"
         [open]="openKeys.includes(m.key)"
@@ -24,7 +24,7 @@
         </div>
        -->
         <div
-          d-menu-item
+          dMenuItem
           (itemClick)="itemClick(item.key)"
           [active]="item.key === activeKey"
           *ngFor="let item of m.children; trackBy: trackByMenu"
@@ -35,7 +35,7 @@
       </div>
       <ng-template #leafTpl>
         <!-- [noStyle]="true" 会完全移除预制样式 -->
-        <div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey">
+        <div dMenuItem (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>

diff --git a/devui/menu/demo/loop/loop-menu/loop-menu.component.ts b/devui/menu/demo/loop/loop-menu/loop-menu.component.ts
@@ -2,18 +2,18 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MenuItemClickType, MenuItemType } from 'ng-devui/menu';
 
 @Component({
-  selector: 'loop-menu',
+  selector: 'd-loop-menu',
   template: `
-    <div d-menu [collapsed]="collapsed" (menuItemClick)="menuItemClick($event)">
+    <div dMenu [collapsed]="collapsed" (menuItemClick)="menuItemClick($event)">
       <ng-container *ngFor="let item of menus; trackBy: trackByMenu">
-        <loop-sub-menu
+        <d-loop-sub-menu
           [menu]="item"
           [activeKey]="activeKey"
           (itemClick)="itemClick($event)"
           *ngIf="item.children?.length; else leafTpl" />
         <ng-template #leafTpl>
           <div
-            d-menu-item
+            dMenuItem
             [active]="activeKey === item.key"
             (itemClick)="itemClick(item.key)"
             dTooltip [content]="collapsed ? item.name : ''" position="right">

diff --git a/devui/menu/demo/loop/loop-menu/loop-sub-menu.component.ts b/devui/menu/demo/loop/loop-menu/loop-sub-menu.component.ts
@@ -2,16 +2,16 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnI
 import { MenuItemType } from 'ng-devui/menu';
 
 @Component({
-  selector: 'loop-sub-menu',
+  selector: 'd-loop-sub-menu',
   template: `
     <div
-      d-sub-menu
+      dSubMenu
       [title]="menu.name"
       [icon]="menu.icon">
       <ng-container *ngFor="let item of menu.children; trackBy: trackByMenu">
-        <loop-sub-menu [menu]="item" [activeKey]="activeKey" (itemClick)="onClick($event)" *ngIf="item.children?.length; else leafTpl" />
+        <d-loop-sub-menu [menu]="item" [activeKey]="activeKey" (itemClick)="onClick($event)" *ngIf="item.children?.length; else leafTpl" />
         <ng-template #leafTpl>
-          <div d-menu-item [active]="activeKey === item.key" (itemClick)="onClick(item.key)">
+          <div dMenuItem [active]="activeKey === item.key" (itemClick)="onClick(item.key)">
             <d-icon class="devui-menu-item-icon" *ngIf="item.icon" [icon]="item.icon" />
             <span class="devui-menu-item-name over-flow-ellipsis">{{ item.name }}</span>
           </div>

diff --git a/devui/menu/demo/loop/loop.component.html b/devui/menu/demo/loop/loop.component.html
@@ -1,4 +1,4 @@
 <div class="demo-menu" style="width: 256px">
   <d-button (btnClick)="collapsed = !collapsed" style="margin-bottom: 10px">{{ collapsed ? 'open' : 'close' }}</d-button>
-  <loop-menu [menus]="menus" [collapsed]="collapsed" />
+  <d-loop-menu [menus]="menus" [collapsed]="collapsed" />
 </div>
diff --git a/devui/menu/demo/open-close/open-close.component.html b/devui/menu/demo/open-close/open-close.component.html
@@ -1,17 +1,17 @@
 <div class="demo-menu" style="width: 256px">
   <d-button (btnClick)="collapsed = !collapsed" style="margin-bottom: 10px">{{ collapsed ? 'open' : 'close' }}</d-button>
-  <div d-menu [collapsed]="collapsed">
+  <div dMenu [collapsed]="collapsed">
     <ng-container *ngFor="let m of menus; trackBy: trackByMenu">
       <div
-        d-sub-menu
+        dSubMenu
         [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
+          dMenuItem
           (itemClick)="itemClick(item.key)"
           [active]="item.key === activeKey"
           *ngFor="let item of m.children; trackBy: trackByMenu"
@@ -22,7 +22,7 @@
       </div>
       <ng-template #leafTpl>
         <div
-          d-menu-item
+          dMenuItem
           (itemClick)="itemClick(m.key)"
           [active]="m.key === activeKey"
           dTooltip

diff --git a/devui/menu/demo/open-one/open-one.component.html b/devui/menu/demo/open-one/open-one.component.html
@@ -1,16 +1,16 @@
 <div class="demo-menu" style="width: 256px">
-  <div d-menu>
+  <div dMenu>
     <ng-container *ngFor="let m of menus; trackBy: trackByMenu">
       <div
-        d-sub-menu
+        dSubMenu
         [icon]="m.icon"
         [title]="m.name"
         [open]="openKey === m.key"
         (openChange)="openChange($event, m.key)"
         *ngIf="m.children?.length; else leafTpl"
       >
         <div
-          d-menu-item
+          dMenuItem
           (itemClick)="itemClick(item.key)"
           [active]="item.key === activeKey"
           *ngFor="let item of m.children; trackBy: trackByMenu"
@@ -20,7 +20,7 @@
         </div>
       </div>
       <ng-template #leafTpl>
-        <div d-menu-item (itemClick)="itemClick(m.key)" [active]="m.key === activeKey">
+        <div dMenuItem (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>

diff --git a/devui/menu/doc/api-cn.md b/devui/menu/doc/api-cn.md
@@ -9,22 +9,22 @@ import { MenuModule } from 'ng-devui/menu';
 在页面中使用:
 
 ```html
-<div d-menu>
-   <div d-menu-item>
+<div dMenu>
+   <div dMenuItem>
     <d-icon class="devui-menu-item-icon" icon="icon-op-list" />
     <span class="devui-menu-item-name">menu item 1</span>
    </div>
-   <div d-sub-menu title="sub menu" icon="icon-more-func">
-      <div d-menu-item>
+   <div dSubMenu title="sub menu" icon="icon-more-func">
+      <div dMenuItem>
         <d-icon class="devui-menu-item-icon" icon="icon-op-list" />
         <span class="devui-menu-item-name">sub menu item 1</span>
       </div>
-      <div d-menu-item>
+      <div dMenuItem>
         <d-icon class="devui-menu-item-icon" icon="icon-op-list" />
         <span class="devui-menu-item-name">sub menu item 2</span>
       </div>
     </div>
-    <div d-menu-item>
+    <div dMenuItem>
       <d-icon class="devui-menu-item-icon" icon="icon-op-list" />
       <span class="devui-menu-item-name">menu item 3</span>
     </div>
@@ -33,20 +33,20 @@ import { MenuModule } from 'ng-devui/menu';
 
 ## Menu
 
-### d-menu 参数
+### dMenu 参数
 
 |        参数        |                         类型                          |    默认    |                                                                                                                  说明                                                                                                                  | 跳转 Demo                                                      |全局配置项| 
 | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- |
 |      collapsed      |                       `boolean`                        |  false   |                                                                                    是否收起                                                                                    | [展开收起](demo#open-close)                                 |
 
-### d-menu 事件
+### dMenu 事件
 
 |       事件       |                                   类型                                    |                                                                            说明                                                                            | 跳转 Demo                    |
 | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- |
 |    menuItemClick    | [MenuItemClickType](#menutype定义) | 可选，menu item点击事件，参数是d-menu-item自身的指令和原生MouseEvent | [基本用法](demo#basic-usage) |                                                                                                        | [基本用法](demo#basic-usage) |
 
 
-### d-sub-menu 参数
+### dSubMenu 参数
 
 |        参数        |                         类型                          |    默认    |                                                                                                                  说明                                                                                                                  | 跳转 Demo                                                      |全局配置项| 
 | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- |
@@ -56,21 +56,21 @@ import { MenuModule } from 'ng-devui/menu';
 |      disabled      |                       `boolean`                        |  false   |  是否禁用                                                                              |                                |
 |      icon      |                       `string`                        |  ''   |  图标                                                                         |                               |
 
-### d-sub-menu 事件
+### dSubMenu 事件
 
 |       事件       |                                   类型                                    |                                                                            说明                                                                            | 跳转 Demo                    |
 | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- |
 |    openChange    | `boolean` | 展开收起事件 |                                                                                                        |  |
 
-### d-menu-item 参数
+### dMenuItem 参数
 
 |        参数        |                         类型                          |    默认    |                                                                                                                  说明                                                                                                                  | 跳转 Demo                                                      |全局配置项| 
 | :----------------: | :----------------: | :---------------------------------------------------: | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------- |
 |      active      |                       `boolean`                       |  false   |  是否选中                                                                                   |                           |
 |      noStyle      |                       `boolean`                        |  false   |  是否移除所有预制样式                                                                                   |                                |
 |      disabled      |                       `boolean`                        |  false   |  是否禁用                                                                              |                                |
 
-### d-menu-item 事件
+### dMenuItem 事件
 
 |       事件       |                                   类型                                    |                                                                            说明                                                                            | 跳转 Demo                    |
 | :--------------: | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------- |