WIP feat(module:splitter): add splitter component

.github/CODEOWNERS

@@ -58,6 +58,7 @@ components/pagination/**                  @vthinkxie
 components/radio/**                       @vthinkxie
 components/select/**                      @vthinkxie
 components/spin/**                        @vthinkxie
+components/splitter/**                    @laffery
 components/switch/**                      @vthinkxie
 components/table/**                       @vthinkxie
 components/tree/**                        @simplejason

.github/nz-boot.yml

@@ -127,3 +127,4 @@ issue:
       Transfer: Ricbet
       Pipes: chensimeng
       Image: stygian-desolator
+      Splitter: laffery

components/components.less

@@ -42,6 +42,7 @@
 @import './skeleton/style/entry.less';
 @import './slider/style/entry.less';
 @import './spin/style/entry.less';
+@import './splitter/style/entry.less';
 @import './statistic/style/entry.less';
 @import './steps/style/entry.less';
 @import './switch/style/entry.less';

components/splitter/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本用法
+  en-US: Basic
+---
+
+## zh-CN
+
+初始化面板大小，面板大小限制。
+
+## en-US
+
+Initialize panel size, panel size limit.

components/splitter/demo/basic.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-basic',
+  imports: [NzSplitterModule],
+  template: ``
+})
+export class NzDemoSplitterBasicComponent {}

components/splitter/demo/collapsible.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 可折叠
+  en-US: Collapsible
+---
+
+## zh-CN
+
+配置 `nzCollapsible` 提供快捷收缩能力。可以通过 `nzMin` 限制收缩后不能通过拖拽展开。
+
+## en-US
+
+Set `nzCollapsible` to enable collapse. Can through `nzMin` to limit dragging to expand when collapsed.

components/splitter/demo/collapsible.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-collapsible',
+  imports: [NzSplitterModule],
+  template: ``
+})
+export class NzDemoSplitterCollapsibleComponent {}

components/splitter/demo/complex.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 复杂组合
+  en-US: Complex combination
+---
+
+## zh-CN
+
+复杂组合面板，快捷折叠，禁止改变大小。
+
+## en-US
+
+Complex combination panel, quick folding, prohibited from changing size.

components/splitter/demo/complex.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-complex',
+  imports: [NzSplitterModule],
+  template: ``
+})
+export class NzDemoSplitterComplexComponent {}

components/splitter/demo/control.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: 受控模式
+  en-US: Control Mode
+---
+
+## zh-CN
+
+受控调整尺寸。当 Panel 之间任意一方禁用 `nzResizable`，则其拖拽将被禁用。
+
+## en-US
+
+Control the size of the splitter. When one of the panels disables `nzResizable`, dragging will be disabled.

components/splitter/demo/control.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-control',
+  imports: [NzSplitterModule],
+  template: ``
+})
+export class NzDemoSplitterControlComponent {}

components/splitter/demo/lazy.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 延迟渲染模式
+  en-US: Lazy
+---
+
+## zh-CN
+
+延迟渲染模式，拖拽时不会立即更新大小，而是等到松手时才更新。
+
+## en-US
+
+Lazy mode, dragging does not update the size immediately, but updates when released.

components/splitter/demo/lazy.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-lazy',
+  imports: [NzSplitterModule],
+  template: ``
+})
+export class NzDemoSplitterLazyComponent {}

components/splitter/demo/multiple.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 多面板
+  en-US: Multiple Panels
+---
+
+## zh-CN
+
+多面板。
+
+## en-US
+
+Multiple panels.

components/splitter/demo/multiple.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-multiple',
+  imports: [NzSplitterModule],
+  template: ``
+})
+export class NzDemoSplitterMultipleComponent {}

components/splitter/demo/vertical.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 垂直方向
+  en-US: Control Mode
+---
+
+## zh-CN
+
+使用垂直布局。
+
+## en-US
+
+Use vertical layout.

components/splitter/demo/vertical.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'nz-demo-splitter-vertical',
+  imports: [NzSplitterModule],
+  template: ``
+})
+export class NzDemoSplitterVerticalComponent {}

components/splitter/doc/index.en-US.md

@@ -0,0 +1,41 @@
+---
+category: Components
+type: Layout
+title: Splitter
+tag: 19.1.0
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*f0SISaETY0wAAAAAAAAAAAAADrJ8AQ/original
+---
+
+Split panels to isolate.
+
+## When To Use
+
+Can be used to separate areas horizontally or vertically. When you need to freely drag and adjust the size of each area.
+When you need to specify the maximum and minimum width and height of an area.
+
+```ts
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+```
+
+## API
+
+### nz-splitter
+
+| 参数              | 说明                              | 类型                           | 默认值            | 全局配置 |
+|-----------------|---------------------------------|------------------------------|----------------|------|
+| `[nzLayout]`    | Layout direction                | `'horizontal' \| 'vertical'` | `'horizontal'` |      |
+| `[nzLazy]`      | Lazy Mode                       | `boolean`                    | `false`        |      |
+| `(resizeStart)` | Callback before dragging starts | `EventEmitter<number[]>`     | -              |      |
+| `(resize)`      | Panel size change callback	     | `EventEmitter<number[]>`     | -              |      |
+| `(resizeEnd)`   | Drag end callback	              | `EventEmitter<number[]>`     | -              |      |
+
+### nz-splitter-panel
+
+| 参数                | 说明                                                              | 类型        | 默认值     | 全局配置 |
+|-------------------|-----------------------------------------------------------------|-----------|---------|------|
+| `[nzDefaultSize]` | Initial panel size support number for px or 'percent%' usage    | `number   | string` | -    | |
+| `[nzMin]`         | Minimum threshold support number for px or 'percent%' usage     | `number   | string` | -    |     |
+| `[nzMax]`         | Maximum threshold support number for px or 'percent%' usage     | ``number  | string` | -    |     |
+| `[nzSize]`        | Controlled panel size support number for px or 'percent%' usage | `number   | string` | -    | |
+| `[nzCollapsible]` | Quick folding                                                   | `boolean` | `false` |      |
+| `[nzResizable]`   | Whether to enable drag and drop                                 | `boolean` | `true`  |      |

components/splitter/doc/index.zh-CN.md

@@ -0,0 +1,43 @@
+---
+category: Components
+type: 布局
+title: Splitter
+subtitle: 分隔面板
+tag: 19.1.0
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*f0SISaETY0wAAAAAAAAAAAAADrJ8AQ/original
+---
+
+自由切分指定区域。
+
+## 何时使用
+
+- 可以水平或垂直地分隔区域。
+- 当需要自由拖拽调整各区域大小。
+- 当需要指定区域的最大最小宽高时。
+
+```ts
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+```
+
+## API
+
+### nz-splitter
+
+| 参数              | 说明        | 类型                           | 默认值            | 全局配置 |
+|-----------------|-----------|------------------------------|----------------|------|
+| `[nzLayout]`    | 布局方向      | `'horizontal' \| 'vertical'` | `'horizontal'` |      |
+| `[nzLazy]`      | 延迟渲染模式    | `boolean`                    | `false`        |      |
+| `(resizeStart)` | 开始拖拽之前回调  | `EventEmitter<number[]>`     | -              |      |
+| `(resize)`      | 面板大小变化回调	 | `EventEmitter<number[]>`     | -              |      |
+| `(resizeEnd)`   | 拖拽结束回调	   | `EventEmitter<number[]>`     | -              |      |
+
+### nz-splitter-panel
+
+| 参数                | 说明                            | 类型        | 默认值     | 全局配置 |
+|-------------------|-------------------------------|-----------|---------|------|
+| `[nzDefaultSize]` | 初始面板大小，支持数字 px 或者文字 '百分比%' 类型 | `number   | string` | -    | |
+| `[nzMin]`         | 最小阈值，支持数字 px 或者文字 '百分比%' 类型   | `number   | string` | -    |     |
+| `[nzMax]`         | 最大阈值，支持数字 px 或者文字 '百分比%' 类型   | ``number  | string` | -    |     |
+| `[nzSize]`        | 受控面板大小，支持数字 px 或者文字 '百分比%' 类型 | `number   | string` | -    | |
+| `[nzCollapsible]` | 快速折叠                          | `boolean` | `false` |      |
+| `[nzResizable]`   | 是否开启拖拽伸缩                      | `boolean` | `true`  |      |

components/splitter/index.ts

@@ -0,0 +1,6 @@
+/**
+ * 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
+ */
+
+export * from './public-api';

components/splitter/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

components/splitter/public-api.ts

@@ -0,0 +1,7 @@
+/**
+ * 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
+ */
+
+export * from './splitter.component';
+export * from './splitter.module';

components/splitter/splitter.component.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'nz-spin',
+  exportAs: 'nzSpin',
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None,
+  template: ``,
+  imports: []
+})
+export class NzSplitterComponent {}

components/splitter/splitter.module.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { NgModule } from '@angular/core';
+
+import { NzSplitterComponent } from './splitter.component';
+
+@NgModule({
+  imports: [NzSplitterComponent],
+  exports: [NzSplitterComponent]
+})
+export class NzSplitterModule {}

components/splitter/style/entry.less

@@ -0,0 +1,2 @@
+@import './index.less';
+@import './patch.less';

components/splitter/style/index.less

@@ -0,0 +1,34 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@splitter-prefix-cls: ~'@{ant-prefix}-splitter';
+
+.@{splitter-prefix-cls} {
+  .reset-component();
+  display: flex;
+  align-items: stretch;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  color: @text-color;
+  font-size: @font-size-base;
+  font-family: @font-family;
+  line-height: @line-height-base;
+  list-style: none;
+
+  &-horizontal {
+    flex-direction: row;
+  }
+
+  &-panel {
+    box-sizing: border-box;
+    padding: 0 1px;
+    overflow: auto;
+    scrollbar-width: thin;
+  }
+}
+
+@import './rtl';

components/splitter/style/patch.less

@@ -0,0 +1,3 @@
+nz-splitter {
+  display: block;
+}