feat(module:segmented): implement new component (#7404)

* feat(module:segmented): implement new component

* test: add test for segmented component

* chore: code update

* fix: fix doc

* feat: add dark mode theme

* fix: fix export

* fix: fix import

.github/CODEOWNERS

@@ -37,6 +37,7 @@ components/statistic/**                   @hullis
 components/timeline/**                    @hullis
 components/tooltip/**                     @hullis
 components/code-editor/**                 @hullis
+components/segmented/**                   @hullis
 components/calendar/**                    @wenqi73
 components/date-picker/**                 @wenqi73
 components/skeleton/**                    @wenqi73

components/components.less

@@ -37,6 +37,7 @@
 @import "./radio/style/entry.less";
 @import "./rate/style/entry.less";
 @import "./select/style/entry.less";
+@import "./segmented/style/index.less";
 @import "./skeleton/style/entry.less";
 @import "./slider/style/entry.less";
 @import "./spin/style/entry.less";

components/core/animation/public-api.ts

@@ -11,3 +11,4 @@ export * from './move';
 export * from './notification';
 export * from './slide';
 export * from './zoom';
+export * from './thumb';

components/core/animation/thumb.ts

@@ -0,0 +1,28 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';
+
+import { AnimationCurves } from './animation-consts';
+
+/**
+ * a move and resize transition in the horizontal direction
+ */
+export interface ThumbAnimationProps {
+  transform: number;
+  width: number;
+}
+
+export const thumbMotion: AnimationTriggerMetadata = trigger('thumbMotion', [
+  state('from', style({ transform: 'translateX({{ transform }}px)', width: '{{ width }}px' }), {
+    params: { transform: 0, width: 0 }
+  }),
+
+  state('to', style({ transform: 'translateX({{ transform }}px)', width: '{{ width }}px' }), {
+    params: { transform: 100, width: 0 }
+  }),
+
+  transition('from => to', animate(`300ms ${AnimationCurves.EASE_IN_OUT}`))
+]);

components/core/config/config.ts

@@ -56,6 +56,7 @@ export interface NzConfig {
   pagination?: PaginationConfig;
   progress?: ProgressConfig;
   rate?: RateConfig;
+  segmented?: SegmentedConfig;
   space?: SpaceConfig;
   spin?: SpinConfig;
   switch?: SwitchConfig;
@@ -252,6 +253,10 @@ export interface RateConfig {
   nzAllowHalf?: boolean;
 }
 
+export interface SegmentedConfig {
+  nzSize?: NzSizeLDSType;
+}
+
 export interface SpaceConfig {
   nzSize?: 'small' | 'middle' | 'large' | number;
 }

components/segmented/demo/basic.md

@@ -0,0 +1,15 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic usage
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Basic Usage.
+

components/segmented/demo/basic.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-segmented-basic',
+  template: `<nz-segmented [nzOptions]="options" (nzValueChange)="handleIndexChange($event)"></nz-segmented>`,
+  styles: [
+    `
+      .code-box-demo {
+        overflow-x: auto;
+      }
+
+      .code-box-demo .ant-segmented {
+        margin-bottom: 10px;
+      }
+    `
+  ]
+})
+export class NzDemoSegmentedBasicComponent {
+  options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
+
+  handleIndexChange(e: number): void {
+    console.log(e);
+  }
+}

components/segmented/demo/block.md

@@ -0,0 +1,14 @@
+---
+order: 10
+title:
+  zh-CN: Block 分段选择器
+  en-US: Block Segmented
+---
+
+## zh-CN
+
+`nzBlock` 属性使其适合父元素宽度。
+
+## en-US
+
+`nzBlock` property will make the `Segmented` fit to its parent width.

components/segmented/demo/block.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-segmented-block',
+  template: `<nz-segmented [nzOptions]="options" [nzBlock]="true"></nz-segmented>`,
+  styles: [
+    `
+      .code-box-demo {
+        overflow-x: auto;
+      }
+
+      .code-box-demo .ant-segmented {
+        margin-bottom: 10px;
+      }
+    `
+  ]
+})
+export class NzDemoSegmentedBlockComponent {
+  options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
+}

components/segmented/demo/custom.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 自定义渲染
+  en-US: Custom Render
+---
+
+## zh-CN
+
+使用 nzLabelTemplate 自定义渲染每一个 Segmented Item。
+
+## en-US
+
+Custom each Segmented Item by nzLabelTemplate.

components/segmented/demo/custom.ts

@@ -0,0 +1,47 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+
+import { NzSegmentedOption } from 'ng-zorro-antd/segmented';
+
+@Component({
+  selector: 'nz-demo-segmented-custom',
+  template: `<nz-segmented [nzLabelTemplate]="templateRef" [nzOptions]="options"></nz-segmented>
+    <ng-template #temp let-index="index">
+      <ng-container [ngSwitch]="index">
+        <ng-container *ngSwitchCase="0">
+          <nz-avatar nzSrc="https://joeschmoe.io/api/v1/random"></nz-avatar>
+          <div>User 1</div>
+        </ng-container>
+        <ng-container *ngSwitchCase="1">
+          <nz-avatar nzText="K"></nz-avatar>
+          <div>User 2</div>
+        </ng-container>
+        <ng-container *ngSwitchCase="2">
+          <nz-avatar nzIcon="user"></nz-avatar>
+          <div>User 3</div>
+        </ng-container>
+      </ng-container>
+    </ng-template> `,
+  styles: [
+    `
+      .code-box-demo {
+        overflow-x: auto;
+      }
+
+      .ant-segmented {
+        margin-bottom: 10px;
+      }
+    `
+  ]
+})
+export class NzDemoSegmentedCustomComponent {
+  @ViewChild('temp', { static: true, read: TemplateRef }) templateRef!: TemplateRef<{
+    $implicit: NzSegmentedOption;
+    index: number;
+  }>;
+
+  options = [
+    { label: 'user1', value: 'user1', useTemplate: true },
+    { label: 'user2', value: 'user2', useTemplate: true },
+    { label: 'user3', value: 'user3', useTemplate: true }
+  ];
+}

components/segmented/demo/disabled.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 不可用
+  en-US: Disabled
+---
+
+## zh-CN
+
+Segmented 不可用。
+
+## en-US
+
+Disabled Segmented.

components/segmented/demo/disabled.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-segmented-disabled',
+  template: `<nz-segmented [nzOptions]="['Map', 'Transit', 'Satellite']" nzDisabled></nz-segmented>
+    <br />
+    <nz-segmented [nzOptions]="options"></nz-segmented>`,
+  styles: [
+    `
+      .code-box-demo {
+        overflow-x: auto;
+      }
+
+      .ant-segmented {
+        margin-bottom: 10px;
+      }
+    `
+  ]
+})
+export class NzDemoSegmentedDisabledComponent {
+  options = [
+    'Daily',
+    { label: 'Weekly', value: 'Weekly', disabled: true },
+    'Monthly',
+    { label: 'Quarterly', value: 'Quarterly', disabled: true },
+    'Yearly'
+  ];
+}

components/segmented/demo/dynamic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 动态数据
+  en-US: Dynamic
+---
+
+## zh-CN
+
+动态加载数据。
+
+## en-US
+
+Load `options` dynamically.

components/segmented/demo/dynamic.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+const defaultOptions = ['Daily', 'Weekly', 'Monthly'];
+
+@Component({
+  selector: 'nz-demo-segmented-dynamic',
+  template: `<nz-segmented [nzOptions]="options"></nz-segmented>
+    <br />
+    <button nz-button nzType="primary" [disabled]="moreLoaded" (click)="handleLoadMore()"> Load more options </button>`,
+  styles: [
+    `
+      .code-box-demo {
+        overflow-x: auto;
+      }
+
+      .ant-segmented {
+        margin-bottom: 10px;
+      }
+    `
+  ]
+})
+export class NzDemoSegmentedDynamicComponent {
+  options = [...defaultOptions];
+
+  moreLoaded = false;
+
+  handleLoadMore(): void {
+    this.moreLoaded = true;
+    this.options = [...defaultOptions, 'Quarterly', 'Yearly'];
+  }
+}

components/segmented/demo/icon.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 设置图标
+  en-US: With Icon
+---
+
+## zh-CN
+
+给 Segmented Item 设置 Icon。
+
+## en-US
+
+Set `icon` for Segmented Item.

components/segmented/demo/icon.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-segmented-icon',
+  template: ` <nz-segmented [nzOptions]="options"></nz-segmented>`,
+  styles: [``]
+})
+export class NzDemoSegmentedIconComponent {
+  options = [
+    { label: 'List', value: 'List', icon: 'bars' },
+    { label: 'Kanban', value: 'Kanban', icon: 'appstore' }
+  ];
+}

components/segmented/demo/module

@@ -0,0 +1,11 @@
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
+import { NzAvatarModule } from 'ng-zorro-antd/avatar';
+
+export const moduleList = [
+  NzAvatarModule,
+  NzIconModule,
+  NzButtonModule,
+  NzSegmentedModule,
+];

components/segmented/demo/size.md

@@ -0,0 +1,15 @@
+---
+order: 1
+title:
+  zh-CN: 三种大小
+  en-US: Three sizes of Segmented
+---
+
+## zh-CN
+
+我们为 Segmented 组件定义了三种尺寸（大、默认、小），高度分别为 `40px`、`32px` 和 `24px`。
+
+## en-US
+
+There are three sizes of an Segmented: `large` (40px), `default` (32px) and `small` (24px).
+

components/segmented/demo/size.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-segmented-size',
+  template: `<nz-segmented [nzOptions]="options" nzSize="small"></nz-segmented>
+    <br />
+    <nz-segmented [nzOptions]="options"></nz-segmented>
+    <br />
+    <nz-segmented [nzOptions]="options" nzSize="large"></nz-segmented>`,
+  styles: [
+    `
+      .ant-segmented {
+        margin-bottom: 10px;
+      }
+    `
+  ]
+})
+export class NzDemoSegmentedSizeComponent {
+  options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
+}

components/segmented/demo/value.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: ngModel
+  en-US: ngModel
+---
+
+## zh-CN
+
+通过 ngModel 指定选中的 index
+
+## en-US
+
+Set selected option via ngModel.