feat(checkbox): add indeterminate state

src/checkbox/checkbox.component.html

@@ -3,6 +3,7 @@
   class="aui-checkbox"
   [class.isDisabled]="disabled"
   [class.isChecked]="value$ | async"
+  [class.isIndeterminate]="indeterminate"
   [class.isTag]="type === 'tag'"
 >
   <input
@@ -17,7 +18,11 @@
   />
   <label class="aui-checkbox__label" [for]="id">
     <i class="aui-checkbox__pointer">
-      <aui-icon icon="check_s" [hidden]="!(value$ | async)"></aui-icon>
+      <aui-icon
+        icon="check_s"
+        [hidden]="!(value$ | async) || indeterminate"
+      ></aui-icon>
+      <aui-icon icon="minus_s" [hidden]="!indeterminate"></aui-icon>
     </i>
     <span class="aui-checkbox__content"><ng-content></ng-content></span>
   </label>

src/checkbox/checkbox.component.scss

@@ -48,4 +48,5 @@ $block: 'aui-checkbox';
   }
 
   @include pointer('isChecked');
+  @include pointer('isIndeterminate');
 }

src/checkbox/checkbox.component.ts

@@ -57,12 +57,22 @@ export class CheckboxComponent extends CommonFormControl<boolean>
     this.label$$.next(val);
   }
 
+  @Input()
+  get indeterminate(): boolean {
+    return this._indeterminate;
+  }
+
+  set indeterminate(value: boolean) {
+    this._indeterminate = value;
+  }
+
   @ViewChild('elRef', { static: true })
   elRef: ElementRef;
 
   private readonly checkboxGroup: CheckboxGroupComponent;
   private _label: unknown;
   private readonly label$$ = new BehaviorSubject(this.label);
+  private _indeterminate = false;
   private readonly destroy$$ = new Subject<void>();
 
   constructor(
@@ -111,6 +121,9 @@ export class CheckboxComponent extends CommonFormControl<boolean>
     if (this.disabled) {
       return;
     }
+    if (this.indeterminate) {
+      this._indeterminate = false;
+    }
     this.emitValueChange(!this.snapshot.value);
     if (this.checkboxGroup) {
       this.checkboxGroup.onCheckboxChange(this);

src/checkbox/mixin.scss

@@ -20,6 +20,7 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+      margin-left: 0;
     }
   }
 

stories/checkbox/checkbox.stories.mdx

@@ -1,13 +1,16 @@
 import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
 import { moduleMetadata } from '@storybook/angular';
 
+import { IndeterminateCheckboxComponent } from './indeterminate-checkbox/component';
+
 import { CheckboxModule } from '@alauda/ui';
 
 <Meta
   title="Checkbox"
   decorators={[
     moduleMetadata({
       imports: [CheckboxModule],
+      declarations: [IndeterminateCheckboxComponent],
     }),
   ]}
 />
@@ -98,6 +101,14 @@ import { CheckboxModule } from '@alauda/ui';
   </Story>
 </Preview>
 
+## 部分选中状态
+
+<Preview>
+  <Story name="indeterminate" height="60px">
+    {{ component: IndeterminateCheckboxComponent }}
+  </Story>
+</Preview>
+
 ## 垂直布局
 
 <Preview>

stories/checkbox/indeterminate-checkbox/component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './template.html',
+})
+export class IndeterminateCheckboxComponent {
+  model = ['label1'];
+  checkAll = false;
+  indeterminate = true;
+
+  handleCheckAllChange(val: boolean) {
+    this.model = val ? ['label1', 'label2', 'label3'] : [];
+    this.indeterminate = false;
+  }
+
+  handleCheckBoxGroupChange(value: string[]) {
+    const checkedCount = value.length;
+    this.checkAll = checkedCount === 3;
+    this.indeterminate = checkedCount > 0 && checkedCount < 3;
+  }
+}

stories/checkbox/indeterminate-checkbox/template.html

@@ -0,0 +1,19 @@
+value: {{ model }}
+<br />
+<aui-checkbox
+  label="label"
+  [(ngModel)]="checkAll"
+  [indeterminate]="indeterminate"
+  (valueChange)="handleCheckAllChange($event)"
+>
+  全选
+</aui-checkbox>
+<br />
+<aui-checkbox-group
+  [(ngModel)]="model"
+  (valueChange)="handleCheckBoxGroupChange($event)"
+>
+  <aui-checkbox label="label1">选项一</aui-checkbox>
+  <aui-checkbox label="label2">选项二</aui-checkbox>
+  <aui-checkbox label="label3">选项三</aui-checkbox>
+</aui-checkbox-group>