feat(n-split): support multiple panel

src/split/demos/enUS/index.demo-entry.md

@@ -13,6 +13,10 @@ nest.vue
 event.vue
 slot.vue
 controlled.vue
+pixel-value.vue
+snap-offset.vue
+mutil-panel.vue
+mutil-panel-nest.vue
 ```
 
 ## API
@@ -21,17 +25,19 @@ controlled.vue
 
 | Name | Type | Default | Description | Version |
 | --- | --- | --- | --- | --- |
-| default-size | `number` | `0.5` | Default split size, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.36.0, `string` 2.38.2 |
+| default-size | `number \| string \| (string \| number)[]` | `0.5` | Default split size, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.36.0, `string` 2.38.2, `(string \| number)[]` NEXT_VERSION |
 | direction | `'horizontal' \| 'vertical'` | `'horizontal'` | The direction of the split. | 2.36.0 |
 | disabled | `boolean` | `false` | Whether to disable the split. | 2.36.0 |
-| max | `string \| number` | `1` | The maximum split threshold, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.36.0, `string` 2.38.2 |
-| min | `string \| number` | `0` | The minimum threshold for splitting, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.36.0, `string` 2.38.2 |
+| max | `string \| number \| (string \| number)[]` | `1` | The maximum split threshold, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.36.0, `string` 2.38.2,`(string \| number)[]` NEXT_VERSION |
+| min | `string \| number \| (string \| number)[]` | `0` | The minimum threshold for splitting, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.36.0, `string` 2.38.2,`(string \| number)[]` NEXT_VERSION |
 | pane1-class | `string` | `undefined` | The class name of the first pane. | 2.38.2 |
 | pane1-style | `Object \| string` | `undefined` | The Style of the first pane | 2.38.2 |
 | pane2-class | `string` | `undefined` | The class name of the second pane. | 2.38.2 |
 | pane2-style | `Object \| string` | `undefined` | The Style of the second pane | 2.38.2 |
 | resize-trigger-size | `number` | `3` | Size of the resize trigger. | 2.36.0 |
-| size | `string \| number` | `undefined` | Split is the controlled split size, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.38.0, `string` 2.38.2 |
+| size | `string \| number \| (string \| number)[]` | `undefined` | Split is the controlled split size, when it's `number` it should in 0 ~ 1, when it's `string` it should be formatted in `${number}px`. | 2.38.0, `string` 2.38.2,`(string \| number)[]` NEXT_VERSION |
+| snap-to-center | `boolean` | `false` | Whether to enable center snapping. | NEXT_VERSION |
+| snap-offset | `number` | `undefined` | The snap offset of the split. | NEXT_VERSION |
 | watch-props | `Array<'defaultSize'>` | `undefined` | Default prop names that needed to be watched. Components will be updated after the prop is changed. Note: the `watch-props` itself is not reactive. | 2.38.0 |
 | on-drag-start | `(e: Event) => void` | `undefined` | Callback function when drag start. | 2.36.0 |
 | on-drag-move | `(e: Event) => void` | `undefined` | Callback function when dragging. | 2.36.0 |
@@ -40,8 +46,9 @@ controlled.vue
 
 ### Split Slots
 
-| Name           | Parameters | Description              | Version |
-| -------------- | ---------- | ------------------------ | ------- |
-| 1              | `()`       | The first pane content.  | 2.36.0  |
-| 2              | `()`       | The Second pane content. | 2.36.0  |
-| resize-trigger | `()`       | Split bar content.       | 2.36.0  |
+| Name           | Parameters | Description              | Version      |
+| -------------- | ---------- | ------------------------ | ------------ |
+| 1              | `()`       | The first pane content.  | 2.36.0       |
+| 2              | `()`       | The Second pane content. | 2.36.0       |
+| \*             | `()`       | The \* pane content.     | NEXT_VERSION |
+| resize-trigger | `()`       | Split bar content.       | 2.36.0       |

src/split/demos/enUS/mutil-panel-nest.demo.vue

@@ -0,0 +1,30 @@
+<markdown>
+# Multiple Panels Nest
+</markdown>
+
+<template>
+  <n-split direction="horizontal" style="height: 200px">
+    <template #1>
+      Pane 1
+    </template>
+    <template #2>
+      <n-split direction="vertical" style="height: 200px">
+        <template #1>
+          Pane 1
+        </template>
+        <template #2>
+          Pane 2
+        </template>
+        <template #3>
+          Pane 3
+        </template>
+        <template #4>
+          Pane 4
+        </template>
+      </n-split>
+    </template>
+    <template #3>
+      Pane 3
+    </template>
+  </n-split>
+</template>

src/split/demos/enUS/mutil-panel.demo.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SplitMultiPanel'
+})
+</script>
+
+<template>
+  <n-split style="height: 200px" :default-size="[0.2, 0.4, 0.4]">
+    <template #1>
+      <div class="split-panel">
+        Panel 1
+      </div>
+    </template>
+    <template #2>
+      <div class="split-panel">
+        Panel 2
+      </div>
+    </template>
+    <template #3>
+      <div class="split-panel">
+        Panel 3
+      </div>
+    </template>
+  </n-split>
+</template>
+
+<style scoped>
+.split-panel {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(128, 128, 128, 0.3);
+}
+</style>

src/split/demos/enUS/pixel-value.demo.vue

@@ -0,0 +1,25 @@
+<markdown>
+# Use Pixel Value to Control Size
+
+Since `2.38.2`, the `min`, `max`, `size` and `default-size` properties can accept pixel values.
+</markdown>
+
+<template>
+  <n-split
+    direction="horizontal"
+    style="height: 200px"
+    max="600px"
+    min="100px"
+    default-size="200px"
+  >
+    <template #1>
+      Pane 1:<br>
+      Min 100px<br>
+      Default 200px<br>
+      Max 300px
+    </template>
+    <template #2>
+      Pane 2
+    </template>
+  </n-split>
+</template>

src/split/demos/enUS/snap-offset.demo.vue

@@ -0,0 +1,39 @@
+<markdown>
+  # Snap Offset
+
+  Set `snap-to-center` to enable center snapping
+</markdown>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      snapToCenter: ref(false)
+    }
+  }
+})
+</script>
+
+<template>
+  <n-flex align="center">
+    <n-switch v-model:value="snapToCenter" />
+
+    <span> Enable center snapping </span>
+
+    <n-split
+      direction="horizontal"
+      :snap-to-center="snapToCenter"
+      style="height: 200px"
+      :snap-offset="75"
+    >
+      <template #1>
+        Pane 1
+      </template>
+      <template #2>
+        Pane 2
+      </template>
+    </n-split>
+  </n-flex>
+</template>

src/split/demos/zhCN/index.demo-entry.md

@@ -14,6 +14,21 @@ event.vue
 slot.vue
 controlled.vue
 pixel-value.vue
+snap-offset.vue
+mutil-panel.vue
+mutil-panel-nest.vue
+single-px-size-debug.vue
+single-number-size-debug.vue
+single-px-default-size-debug.vue
+single-number-default-size-debug.vue
+single-px-size-threshold-debug.vue
+single-number-size-threshold-debug.vue
+mutil-number-default-size-debug.vue
+mutil-number-size-debug.vue
+mutil-number-size-threshold-debug.vue
+mutil-px-default-size-debug.vue
+mutil-px-size-debug.vue
+mutil-px-size-threshold-debug.vue
 ```
 
 ## API
@@ -22,17 +37,19 @@ pixel-value.vue
 
 | 名称 | 类型 | 默认值 | 说明 | 版本 |
 | --- | --- | --- | --- | --- |
-| default-size | `string \| number` | `0.5` | Split 的默认分割大小，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.36.0, `string` 2.38.2 |
+| default-size | `string \| number \| (string \| number)[]` | `0.5` | Split 的默认分割大小，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.36.0, `string` 2.38.2,`(string \| number)[]` NEXT_VERSION |
 | direction | `'horizontal' \| 'vertical'` | `'horizontal'` | Split 的分割方向 | 2.36.0 |
 | disabled | `boolean` | `false` | 是否禁用 | 2.36.0 |
-| max | `string \| number` | `1` | Split 的分割最大阈值，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.36.0, `string` 2.38.2 |
-| min | `string \| number` | `0` | Split 的分割最小阈值，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.36.0, `string` 2.38.2 |
+| max | `string \| number \| (string \| number)[]` | `1` | Split 的分割最大阈值，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.36.0, `string` 2.38.2,`(string \| number)[]` NEXT_VERSION |
+| min | `string \| number \| (string \| number)[]` | `0` | Split 的分割最小阈值，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.36.0, `string` 2.38.2,`(string \| number)[]` NEXT_VERSION |
 | pane1-class | `string` | `undefined` | 第一个面板的类名 | 2.38.2 |
 | pane1-style | `Object \| string` | `undefined` | 第一个面板的样式 | 2.38.2 |
 | pane2-class | `string` | `undefined` | 第二个面板的类名 | 2.38.2 |
 | pane2-style | `Object \| string` | `undefined` | 第二个面板的样式 | 2.38.2 |
 | resize-trigger-size | `number` | `3` | Split 的分隔条大小 | 2.36.0 |
-| size | `string \| number` | `undefined` | Split 的受控分割大小，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.38.0, `string` 2.38.2 |
+| size | `string \| number \| (string \| number)[]` | `undefined` | Split 的受控分割大小，为 `number` 类型时应该为 0 ~ 1 之间的值，为 `string` 类型时应该为 `${number}px` 格式 | 2.38.0, `string` 2.38.2,`(string \| number)[]` NEXT_VERSION |
+| snap-to-center | `boolean` | `false` | 是否启用中间吸附 | NEXT_VERSION |
+| snap-offset | `number` | `undefined` | Split 的吸附偏移量 | NEXT_VERSION |
 | watch-props | `Array<'defaultSize'>` | `undefined` | 需要检测变更的默认属性，检测后组件状态会更新。注意：`watch-props` 本身不是响应式的 | 2.38.0 |
 | on-drag-start | `(e: Event) => void` | `undefined` | 开始拖拽的回调函数 | 2.36.0 |
 | on-drag-move | `(e: Event) => void` | `undefined` | 拖拽中的回调函数 | 2.36.0 |
@@ -41,8 +58,9 @@ pixel-value.vue
 
 ### Split Slots
 
-| 名称           | 参数 | 说明           | 版本   |
-| -------------- | ---- | -------------- | ------ |
-| 1              | `()` | 第一个面板内容 | 2.36.0 |
-| 2              | `()` | 第二个面板内容 | 2.36.0 |
-| resize-trigger | `()` | 分割条内容     | 2.36.0 |
+| 名称           | 参数 | 说明             | 版本         |
+| -------------- | ---- | ---------------- | ------------ |
+| 1              | `()` | 第一个面板内容   | 2.36.0       |
+| 2              | `()` | 第二个面板内容   | 2.36.0       |
+| \*             | `()` | 第 \* 个面板内容 | NEXT_VERSION |
+| resize-trigger | `()` | 分割条内容       | 2.36.0       |

src/split/demos/zhCN/mutil-number-default-size-debug.demo.vue

@@ -0,0 +1,21 @@
+<markdown>
+  # 多个 number 类型 default-size 调试
+  </markdown>
+
+<template>
+  <n-split
+    direction="horizontal"
+    style="height: 200px"
+    :default-size="[0.3, 0.2, 0.5]"
+  >
+    <template #1>
+      Pane 1
+    </template>
+    <template #2>
+      Pane 2
+    </template>
+    <template #3>
+      Pane 3
+    </template>
+  </n-split>
+</template>

src/split/demos/zhCN/mutil-number-size-debug.demo.vue

@@ -0,0 +1,17 @@
+<markdown>
+# 多个 number 类型 size 调试
+</markdown>
+
+<template>
+  <n-split direction="horizontal" style="height: 200px" :size="[0.3, 0.2, 0.5]">
+    <template #1>
+      Pane 1
+    </template>
+    <template #2>
+      Pane 2
+    </template>
+    <template #3>
+      Pane 3
+    </template>
+  </n-split>
+</template>

src/split/demos/zhCN/mutil-number-size-threshold-debug.demo.vue

@@ -0,0 +1,23 @@
+<markdown>
+# 多个 number 类型 size threshold 调试
+</markdown>
+
+<template>
+  <n-split
+    direction="horizontal"
+    style="height: 200px"
+    :size="[0.3, 0.2, 0.5]"
+    :min="[0.1, 0.2, 0.3]"
+    :max="[0.4, 0.5, 0.9]"
+  >
+    <template #1>
+      Pane 1
+    </template>
+    <template #2>
+      Pane 2
+    </template>
+    <template #3>
+      Pane 3
+    </template>
+  </n-split>
+</template>

src/split/demos/zhCN/mutil-panel-nest.demo.vue

@@ -0,0 +1,30 @@
+<markdown>
+# 多个面板嵌套
+</markdown>
+
+<template>
+  <n-split direction="horizontal" style="height: 200px">
+    <template #1>
+      Pane 1
+    </template>
+    <template #2>
+      <n-split direction="vertical" style="height: 200px">
+        <template #1>
+          Pane 1
+        </template>
+        <template #2>
+          Pane 2
+        </template>
+        <template #3>
+          Pane 3
+        </template>
+        <template #4>
+          Pane 4
+        </template>
+      </n-split>
+    </template>
+    <template #3>
+      Pane 3
+    </template>
+  </n-split>
+</template>

src/split/demos/zhCN/mutil-panel.demo.vue

@@ -0,0 +1,17 @@
+<markdown>
+# 多个面板
+</markdown>
+
+<template>
+  <n-split direction="horizontal" style="height: 200px">
+    <template #1>
+      Pane 1
+    </template>
+    <template #2>
+      Pane 2
+    </template>
+    <template #3>
+      Pane 3
+    </template>
+  </n-split>
+</template>

src/split/demos/zhCN/mutil-px-default-size-debug.demo.vue

@@ -0,0 +1,21 @@
+<markdown>
+# 多个 px 类型 default-size 调试
+</markdown>
+
+<template>
+  <n-split
+    direction="horizontal"
+    style="height: 200px"
+    :default-size="['200px', '200px', '200px']"
+  >
+    <template #1>
+      Pane 1
+    </template>
+    <template #2>
+      Pane 2
+    </template>
+    <template #3>
+      Pane 3
+    </template>
+  </n-split>
+</template>