fix(drawer): no default config when using component mode (#535)

Co-authored-by: JounQin <admin@1stg.me>

Author: igauch

.changeset/stale-dots-speak.md

@@ -0,0 +1,6 @@
+---
+'@alauda/ui': patch
+---
+
+- fix(drawer): no default config when using component mode
+- feat(drawer): template context support contentParams as $implicit

package.json

@@ -106,7 +106,7 @@
     "zone.js": "^0.13.1"
   },
   "resolutions": {
-    "prettier": "~2.7.1"
+    "prettier": "~2.8.8"
   },
   "publishConfig": {
     "access": "public",

src/date-picker/calendar/range-picker-panel/template.html

@@ -113,6 +113,6 @@
   <span
     *ngIf="value"
     class="date-value date-holder"
-    >{{ value | date: FOOTER_DATE_FORMAT }}</span
+    >{{ value | date : FOOTER_DATE_FORMAT }}</span
   >
 </ng-template>

src/drawer/component/internal/internal.component.html

@@ -20,7 +20,7 @@
           <ng-container
             *ngIf="isTemplateRef(options.title); else normal"
             [ngTemplateOutlet]="options.title"
-            [ngTemplateOutletContext]="options.contentParams"
+            [ngTemplateOutletContext]="context"
           ></ng-container>
           <ng-template #normal>
             {{ options.title }}
@@ -42,7 +42,7 @@
         <ng-container
           *ngIf="isTemplateRef(options.content)"
           [ngTemplateOutlet]="options.content"
-          [ngTemplateOutletContext]="options.contentParams"
+          [ngTemplateOutletContext]="context"
         >
         </ng-container>
       </div>
@@ -54,7 +54,7 @@
         <ng-container
           *ngIf="isTemplateRef(options.footer); else normal"
           [ngTemplateOutlet]="options.footer"
-          [ngTemplateOutletContext]="options.contentParams"
+          [ngTemplateOutletContext]="context"
         ></ng-container>
         <ng-template #normal>
           {{ options.footer }}

src/drawer/component/internal/internal.component.ts

@@ -119,6 +119,13 @@ export class DrawerInternalComponent<T = unknown, C extends object = object> {
     );
   }
 
+  get context() {
+    return {
+      $implicit: this.options.contentParams,
+      ...this.options.contentParams,
+    };
+  }
+
   isTemplateRef = isTemplateRef;
 
   constructor(private readonly injector: Injector) {}

src/drawer/drawer.service.ts

@@ -8,14 +8,14 @@ import { DrawerRef } from './drawer-ref';
 import { DrawerOptions, DrawerSize } from './types';
 
 const DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
-const DEFAULT_OPTIONS: DrawerOptions = {
+const DEFAULT_OPTIONS = {
   size: DrawerSize.Medium,
   offsetY: '0',
   showClose: true,
   hideOnClickOutside: false,
   divider: true,
   disposeWhenHide: true,
-};
+} as const satisfies DrawerOptions;
 
 @Injectable()
 export class DrawerService<
@@ -46,10 +46,7 @@ export class DrawerService<
   }
 
   updateOptions(options: DrawerOptions<T, C>): void {
-    this.options = {
-      ...(DEFAULT_OPTIONS as DrawerOptions<T, C>),
-      ...options,
-    };
+    this.options = merge<DrawerOptions<T, C>>(DEFAULT_OPTIONS, options);
   }
 
   private createOverlay() {
@@ -135,3 +132,18 @@ export class DrawerService<
     this.dispose();
   }
 }
+
+function merge<T extends object>(target: T, source: T) {
+  return Object.keys(source).reduce(
+    (acc, _key) => {
+      const key = _key as keyof T;
+      if (source[key] !== undefined) {
+        acc[key] = source[key];
+      }
+      return acc;
+    },
+    {
+      ...target,
+    },
+  );
+}

src/tabs/tab-group.component.ts

@@ -186,7 +186,8 @@ export class TabGroupComponent
 
   /** Event emitted when focus has changed within a tab group. */
   @Output()
-  readonly focusChange: EventEmitter<TabChangeEvent> = new EventEmitter<TabChangeEvent>();
+  readonly focusChange: EventEmitter<TabChangeEvent> =
+    new EventEmitter<TabChangeEvent>();
 
   constructor(private readonly _changeDetectorRef: ChangeDetectorRef) {}
 

src/time-picker/panel/panel.template.html

@@ -20,7 +20,7 @@
           }"
           (click)="selectValue(item, TimePickerControlType.Hour)"
         >
-          {{ item | number: '2.0-0' }}
+          {{ item | number : '2.0-0' }}
         </li>
       </ul>
       <div [class]="bem.element('column-strut')"></div>
@@ -44,7 +44,7 @@
           }"
           (click)="selectValue(item, TimePickerControlType.Minute)"
         >
-          {{ item | number: '2.0-0' }}
+          {{ item | number : '2.0-0' }}
         </li>
       </ul>
       <div [class]="bem.element('column-strut')"></div>
@@ -67,7 +67,7 @@
           }"
           (click)="selectValue(item, TimePickerControlType.Second)"
         >
-          {{ item | number: '2.0-0' }}
+          {{ item | number : '2.0-0' }}
         </li>
       </ul>
       <div [class]="bem.element('column-strut')"></div>

yarn.lock

@@ -15238,10 +15238,10 @@ prettier-plugin-toml@^0.3.1:
     "@toml-tools/parser" "^0.3.1"
     prettier "^1.16.0"
 
-prettier@>=2.3, prettier@>=2.3.0, prettier@>=2.4.0, prettier@^1.16.0, prettier@^2.7.1, prettier@^2.8.0, prettier@^2.8.8, prettier@~2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
-  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
+prettier@>=2.3, prettier@>=2.3.0, prettier@>=2.4.0, prettier@^1.16.0, prettier@^2.7.1, prettier@^2.8.0, prettier@^2.8.8, prettier@~2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 pretty-bytes@^5.3.0:
   version "5.6.0"