feat(theme:layout-default): add hideEmptyChildren (#1746)

ng-alain · Jan 11, 2024 · b6ab5f0 · b6ab5f0
1 parent c03a797
commit b6ab5f0
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 23 deletions.
diff --git a/packages/theme/layout-default/index.en-US.md b/packages/theme/layout-default/index.en-US.md
@@ -128,6 +128,7 @@ The layout can be dynamically managed at runtime through the `LayoutDefaultServi
 | `[disabledAcl]` | Displayed `disabled` state when `acl` check fails. | `boolean` | `false` |
 | `[autoCloseUnderPad]` | When the route width is less than the Pad width, the sidebar is automatically closed. | `boolean` | `true` |
 | `[recursivePath]` | Automatic up recursive lookup, menu data source contains `/ware`, then `/ware/1` is also treated as `/ware` | `boolean` | `true` |
+| `[hideEmptyChildren]` | When all children are hidden, whether to hide the parent as well | `boolean` | `true` |
 | `[openStrictly]` | Precise check open status, does not auto closed other open item | `boolean` | `false` |
 | `[maxLevelIcon]` | Icon displays up to which level | `number` | `3` |
 | `(select)` | Callback when clicking menu (including `disabled`) | `EventEmitter<Menu>` | - |

diff --git a/packages/theme/layout-default/index.zh-CN.md b/packages/theme/layout-default/index.zh-CN.md
@@ -128,6 +128,7 @@ export class LayoutBasicComponent {
 | `[disabledAcl]` | `acl` 校验失败时以 `disabled` 状态显示 | `boolean` | `false` |
 | `[autoCloseUnderPad]` | 小于Pad宽度时路由切换后自动关闭侧边栏 | `boolean` | `true` |
 | `[recursivePath]` | 自动向上递归查找，菜单数据源包含 `/ware`，则 `/ware/1` 也视为 `/ware` 项 | `boolean` | `true` |
+| `[hideEmptyChildren]` | 当所有子项都为隐藏时，是否也隐藏父级 | `boolean` | `true` |
 | `[openStrictly]` | 展开完全受控，不再自动关闭已展开的项 | `boolean` | `false` |
 | `[maxLevelIcon]` | Icon最多显示到第几层 | `number` | `3` |
 | `(select)` | 点击菜单时回调（包含 `disabled`） | `EventEmitter<Menu>` | - |

diff --git a/packages/theme/layout-default/layout-nav.component.spec.ts b/packages/theme/layout-default/layout-nav.component.spec.ts
@@ -223,28 +223,55 @@ describe('theme: layout-default-nav', () => {
         page.checkText('.sidebar-nav__item', `i18n 1`);
       });
 
-      it('should be hide when children are hide', () => {
-        createComp();
-        menuSrv.add([
-          {
-            text: 'parent',
-            children: [
-              { text: 'l1', hide: true },
-              { text: 'l2', hide: false }
-            ]
-          }
-        ]);
-        page.checkCount('.sidebar-nav__group-title', 1);
-        menuSrv.add([
-          {
-            text: 'parent',
-            children: [
-              { text: 'l1', hide: true },
-              { text: 'l2', hide: true }
-            ]
-          }
-        ]);
-        page.checkCount('.sidebar-nav__group-title', 0);
+      describe('#hideEmptyChildren', () => {
+        it('with true', () => {
+          createComp();
+          menuSrv.add([
+            {
+              text: 'parent',
+              children: [
+                { text: 'l1', hide: true },
+                { text: 'l2', hide: false }
+              ]
+            }
+          ]);
+          page.checkCount('.sidebar-nav__group-title', 1);
+          menuSrv.add([
+            {
+              text: 'parent',
+              children: [
+                { text: 'l1', hide: true },
+                { text: 'l2', hide: true }
+              ]
+            }
+          ]);
+          page.checkCount('.sidebar-nav__group-title', 0);
+        });
+        it('with false', () => {
+          createComp();
+          context.hideEmptyChildren = false;
+          fixture.detectChanges();
+          menuSrv.add([
+            {
+              text: 'parent',
+              children: [
+                { text: 'l1', hide: true },
+                { text: 'l2', hide: false }
+              ]
+            }
+          ]);
+          page.checkCount('.sidebar-nav__group-title', 1);
+          menuSrv.add([
+            {
+              text: 'parent',
+              children: [
+                { text: 'l1', hide: true },
+                { text: 'l2', hide: true }
+              ]
+            }
+          ]);
+          page.checkCount('.sidebar-nav__group-title', 1);
+        });
       });
     });
 
@@ -639,6 +666,7 @@ describe('theme: layout-default-nav', () => {
       [disabledAcl]="disabledAcl"
       [autoCloseUnderPad]="autoCloseUnderPad"
       [recursivePath]="recursivePath"
+      [hideEmptyChildren]="hideEmptyChildren"
       [openStrictly]="openStrictly"
       (select)="select()"
     />
@@ -650,6 +678,7 @@ class TestComponent {
   disabledAcl = false;
   autoCloseUnderPad = false;
   recursivePath = false;
+  hideEmptyChildren = true;
   openStrictly = false;
   select(): void {}
 }

diff --git a/packages/theme/layout-default/layout-nav.component.ts b/packages/theme/layout-default/layout-nav.component.ts
@@ -51,6 +51,7 @@ export class LayoutDefaultNavComponent implements OnInit, OnDestroy {
   static ngAcceptInputType_disabledAcl: BooleanInput;
   static ngAcceptInputType_autoCloseUnderPad: BooleanInput;
   static ngAcceptInputType_recursivePath: BooleanInput;
+  static ngAcceptInputType_hideEmptyChildren: BooleanInput;
   static ngAcceptInputType_openStrictly: BooleanInput;
   static ngAcceptInputType_maxLevelIcon: NumberInput;
 
@@ -63,6 +64,7 @@ export class LayoutDefaultNavComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() disabledAcl = false;
   @Input() @InputBoolean() autoCloseUnderPad = true;
   @Input() @InputBoolean() recursivePath = true;
+  @Input() @InputBoolean() hideEmptyChildren = true;
   @Input()
   @InputBoolean()
   set openStrictly(value: boolean) {
@@ -249,7 +251,7 @@ export class LayoutDefaultNavComponent implements OnInit, OnDestroy {
           icon.value = this.sanitizer.bypassSecurityTrustHtml(icon.value!!);
         }
       });
-      this.fixHide(data);
+      if (this.hideEmptyChildren) this.fixHide(data);
       this.list = data.filter((w: Nav) => w._hidden !== true);
       cdr.detectChanges();
     });