feat: card header support secondary size

.changeset/hungry-rats-rest.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+feat: card header support secondary size

src/card/card.component.scss

@@ -13,10 +13,15 @@ $b: aui-card;
   @include card-shadow;
 
   &__header {
+    display: flex;
+    align-items: center;
     padding: 0;
+    font-weight: use-var(font-weight-bold);
     @include text-set(xxl, main);
 
-    font-weight: use-var(font-weight-bold);
+    &--secondary {
+      @include text-set(xl);
+    }
 
     + .#{$b}__content {
       margin-top: use-var(spacing-xl);

src/card/helper-directives.ts

@@ -1,12 +1,16 @@
-import { Directive } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 
 @Directive({
   selector: '[auiCardHeader]',
   host: {
     '[class.aui-card__header]': 'true',
+    '[class.aui-card__header--secondary]': 'size === "secondary"',
   },
 })
-export class CardHeaderDirective {}
+export class CardHeaderDirective {
+  @Input()
+  size: 'default' | 'secondary' = 'default';
+}
 
 @Directive({
   selector: '[auiCardFooter]',

src/index.ts

@@ -35,4 +35,3 @@ export * from './time-picker';
 export * from './tooltip';
 export * from './tree-select';
 export * from './types';
-export * from './utils';

src/utils/operators.ts

@@ -1,12 +1,32 @@
-import { pipe, publishReplay, refCount } from 'rxjs';
+import { ReplaySubject, share, TimestampProvider } from 'rxjs';
 
-/**
- * @see https://rxjs.dev/deprecations/multicasting#publishreplay
- *
- * FIXME:
- * The recommended replacement is breaking our apps for watching resources,
- * revert it back temporarily. see also https://github.com/ReactiveX/rxjs/discussions/6438
- */
-export const publishRef = <T>(bufferSize = 1, windowTime?: number) =>
-  // eslint-disable-next-line sonar/deprecation
-  pipe(publishReplay<T>(bufferSize, windowTime), refCount());
+export type PublishRefConfig<T> =
+  | number
+  | (import('rxjs/internal/operators/share').ShareConfig<T> & {
+      bufferSize?: number;
+      windowTime?: number;
+      timestampProvider?: TimestampProvider;
+    });
+
+export const publishRef = <T>(bufferSizeOrConfig: PublishRefConfig<T> = {}) => {
+  const {
+    bufferSize = 1,
+    windowTime,
+    timestampProvider,
+    connector = () =>
+      new ReplaySubject(bufferSize, windowTime, timestampProvider),
+    resetOnError = false,
+    resetOnComplete = false,
+    resetOnRefCountZero = true,
+  } = typeof bufferSizeOrConfig === 'number'
+    ? ({
+        bufferSize: bufferSizeOrConfig,
+      } as Exclude<PublishRefConfig<T>, number>)
+    : bufferSizeOrConfig;
+  return share<T>({
+    connector,
+    resetOnError,
+    resetOnComplete,
+    resetOnRefCountZero,
+  });
+};

stories/card/card.stories.mdx

@@ -32,6 +32,18 @@ import { CardModule } from '@alauda/ui';
           </div>
           <div auiCardFooter>footer</div>
         </aui-card>
+        <aui-card [divider]="false">
+          <div
+            auiCardHeader
+            size="secondary"
+          >
+            secondary header
+          </div>
+          <div style="line-height: 64px; background-color: #ededed;">
+            content
+          </div>
+          <div auiCardFooter>footer</div>
+        </aui-card>
       `,
     }}
   </Story>