feat(comp:tabs): add dnd sortable support for tabs

packages/components/tabs/demo/DndSortable.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 拖拽排序
+  en: Dnd sortable
+order: 23
+---
+
+## zh
+
+通过 `dndSortable` 配置拖拽排序。
+
+## en
+
+Enable drag sorting by `dndSortable` prop.

packages/components/tabs/demo/DndSortable.vue

@@ -0,0 +1,40 @@
+<template>
+  <IxTabs
+    v-model:selectedKey="selectedKey"
+    :dataSource="dataSource"
+    addable
+    :dndSortable="{
+      dragHandle: true,
+    }"
+    closable
+    :onDndSortChange="handleDndSortChange"
+    @add="onAdd"
+  >
+    <template #content="{ key }"> Content of Tab {{ key }} </template>
+  </IxTabs>
+</template>
+
+<script setup lang="ts">
+import type { TabsData } from '@idux/components/tabs'
+
+import { ref } from 'vue'
+
+const selectedKey = ref(0)
+
+const dataSource = ref<TabsData[]>(
+  Array.from({ length: 20 }).map((_, index) => {
+    return { key: index, title: `Tab ${index}` }
+  }),
+)
+
+const onAdd = () => {
+  const newKey = dataSource.value.length
+  dataSource.value = [...dataSource.value, { key: newKey, title: `Tab ${newKey}` }]
+  selectedKey.value = newKey
+}
+
+const handleDndSortChange = (newData: TabsData[], oldData: TabsData[]) => {
+  console.log('handleDndSortChange', newData, oldData)
+  dataSource.value = newData
+}
+</script>

packages/components/tabs/docs/Api.zh.md

@@ -10,6 +10,7 @@
 | `addable` | 显示新增按钮 | `boolean` | `false`| - | - |
 | `closable` | 显示关闭按钮 | `boolean` | `false`| - | - |
 | `dataSource` | 数据源 | `TabsData[]` | - | - | 优先级高于 `default` 插槽 |
+| `dndSortable` | 拖拽排序配置 | `boolean` | `TabsDndSortable` | `false` | - |
 | `forceRender` | 内容被隐藏时是否渲染 DOM 结构 | `boolean` | `false` | - | - |
 | `mode` | 当`type`为`segment`时按钮的样式 | `'default' \| 'primary'` | `'default'` | - | - |
 | `placement` | 标签的方位 | `'top' \| 'start' \| 'end' \| 'bottom'` | `'top'` | - | 其他类型仅在type为`line`生效 |
@@ -18,6 +19,20 @@
 | `onAdd` | 点击添加按钮后的回调 | `() => void \| boolean \| Promise<boolean>` | - | - |
 | `onClose` | 点击关闭按钮后的回调，返回 `false` 或 promise resolve `false` 或 promise reject 会阻止关闭 | `(key: any) => void \| boolean \| Promise<boolean>` | - | - |
 | `onBeforeLeave` | 切换标签之前的钩子函数，返回 `false` 或 promise resolve `false` 或 promise reject 会阻止切换 | `(key: VKey, oldKey?: VKey) => boolean \| Promise<boolean>`| - | - | - |
+| `onDndSortReorder` | 数据重排序之后的回调 | `(reorderInfo: DndSortableReorderInfo) => void` | - | - | - |
+| `onDndSortChange` | 数据排序改变之后的回调 | `(newData: TabsData[], oldData: TabsData[]) => void` | - | - | - |
+
+```ts
+export interface DndSortableReorderInfo {
+  sourceIndex: number
+  targetIndex: number
+  sourceKey: VKey
+  targetKey: VKey
+  sourceData: TabsData
+  targetData: TabsData
+  operation: 'insertBefore' | 'insertAfter' | 'insertChild'
+}
+```
 
 #### IxTabProps
 

packages/components/tabs/src/Tabs.tsx

@@ -34,6 +34,25 @@
     const mergedPrefixCls = computed(() => `${common.prefixCls}-tabs`)
     const mergedSize = computed(() => props.size ?? config.size)
 
+    const mergedDndSortable = computed(() => {
+      const dndSortable = props.dndSortable
+      if (!dndSortable) {
+        return false
+      }
+
+      if (dndSortable === true) {
+        return {
+          autoScroll: true as const,
+          handle: false as const,
+        }
+      }
+
+      return {
+        autoScroll: dndSortable.autoScroll ?? true,
+        handle: dndSortable.handle ?? false,
+      }
+    })
+
     const mergedDataSource = useDataSource(props, slots)
     const horizontalPlacement = ['top', 'bottom']
     const isHorizontal = computed(() => horizontalPlacement.includes(props.placement))
@@ -77,6 +96,7 @@
       locale: locale.tabs,
       mergedPrefixCls,
       mergedDataSource,
+      mergedDndSortable,
       allTabsPanelVisible,
       isHorizontal,
       closedKeys,

packages/components/tabs/src/contents/MoreSelectPane.tsx

@@ -5,7 +5,9 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { defineComponent, inject, shallowRef, watch } from 'vue'
+import type { DndSortableReorderInfo } from '@idux/cdk/dnd'
+
+import { computed, defineComponent, inject, shallowRef, watch } from 'vue'
 
 import { isNil, isString } from 'lodash-es'
 
@@ -21,11 +23,24 @@ import { moreSelectPaneProps } from '../types'
 export default defineComponent({
   props: moreSelectPaneProps,
   setup(props, { slots }) {
-    const { props: tabsProps, mergedPrefixCls, selectedKey, handleTabClose, setSelectedKey } = inject(tabsToken)!
+    const {
+      props: tabsProps,
+      mergedPrefixCls,
+      mergedDndSortable,
+      selectedKey,
+      handleTabClose,
+      setSelectedKey,
+    } = inject(tabsToken)!
 
     const [searchValue, setSearchValue] = useState('')
     const searchInputRef = shallowRef<InputInstance>()
 
+    const filteredDataSource = computed(() => {
+      return props.dataSource.filter(data => {
+        return String(data.label).indexOf(searchValue.value) !== -1
+      })
+    })
+
     const handleInput = (evt: Event) => {
       const inputValue = (evt.target as HTMLInputElement).value
       setSearchValue(inputValue)
@@ -46,6 +61,29 @@ export default defineComponent({
       setSelectedKey(data.key as VKey)
     }
 
+    const handleSortReorder = (reorderInfo: DndSortableReorderInfo) => {
+      if (!props.onSortReorder) {
+        return
+      }
+
+      if (filteredDataSource.value.length === props.dataSource.length) {
+        props.onSortReorder(reorderInfo)
+      } else {
+        const { sourceIndex, targetIndex, ...rest } = reorderInfo
+        const sourceKey = filteredDataSource.value[sourceIndex].key!
+        const targetKey = filteredDataSource.value[targetIndex].key!
+
+        const mergedSourceIndex = props.dataSource.findIndex(data => data.key === sourceKey)
+        const mergedTargetIndex = props.dataSource.findIndex(data => data.key === targetKey)
+
+        props.onSortReorder({
+          sourceIndex: mergedSourceIndex,
+          targetIndex: mergedTargetIndex,
+          ...rest,
+        })
+      }
+    }
+
     const optionLabelRender = (data: SelectData) => {
       const { key, label, disabled, customTitle } = data
       const titleSlot =
@@ -86,9 +124,6 @@ export default defineComponent({
     )
 
     return () => {
-      const mergedDataSource = props.dataSource.filter(data => {
-        return String(data.label).indexOf(searchValue.value) !== -1
-      })
       return (
         <div>
           <IxInput
@@ -106,9 +141,10 @@ export default defineComponent({
               optionLabel: optionLabelRender,
             }}
             selectedKeys={!isNil(selectedKey.value) ? [selectedKey.value] : undefined}
-            dataSource={mergedDataSource}
+            dataSource={filteredDataSource.value}
+            dndSortable={mergedDndSortable.value}
+            onDndSortReorder={handleSortReorder}
             onOptionClick={handleSelectChange}
-            virtual
             _virtualScrollHeight={props._virtualScrollHeight}
           />
         </div>

packages/components/tabs/src/contents/TabNav.tsx

@@ -17,7 +17,8 @@ import {
   watchEffect,
 } from 'vue'
 
-import { useKey } from '@idux/cdk/utils'
+import { CdkDndSortableItem } from '@idux/cdk/dnd'
+import { convertElement, useKey } from '@idux/cdk/utils'
 import { IxIcon } from '@idux/components/icon'
 
 import { tabsToken } from '../tokens'
@@ -57,8 +58,8 @@ export default defineComponent({
       navAttrs.value[key] = attr
     }
 
-    onMounted(() => setNavAttr(elementRef.value))
-    onUpdated(() => setNavAttr(elementRef.value))
+    onMounted(() => setNavAttr(convertElement(elementRef.value)))
+    onUpdated(() => setNavAttr(convertElement(elementRef.value)))
     onBeforeUnmount(() => setNavAttr(undefined))
 
     const classes = computed(() => {
@@ -71,7 +72,7 @@ export default defineComponent({
     })
 
     watchEffect(() => {
-      const element = elementRef.value
+      const element = convertElement(elementRef.value)
       if (element && props.selected) {
         props.onSelected(element)
       }
@@ -102,14 +103,29 @@ export default defineComponent({
           })
         : props.title
       /* eslint-enable indent */
-      return (
+
+      const contentNodes = [
+        <span class={`${prefixCls.value}-label`}>{titleNode}</span>,
+        mergedClosable.value && (
+          <span class={`${mergedPrefixCls.value}-nav-close-icon`} onClick={handleClose}>
+            <IxIcon name="close"></IxIcon>
+          </span>
+        ),
+      ]
+
+      return tabsProps.dndSortable ? (
+        <CdkDndSortableItem
+          ref={elementRef}
+          class={classes.value}
+          onClick={handleClick}
+          itemKey={key}
+          canDrag={!props.disabled}
+        >
+          {contentNodes}
+        </CdkDndSortableItem>
+      ) : (
         <div ref={elementRef} class={classes.value} onClick={handleClick}>
-          <span class={`${prefixCls.value}-label`}>{titleNode}</span>
-          {mergedClosable.value && (
-            <span class={`${mergedPrefixCls.value}-nav-close-icon`} onClick={handleClose}>
-              <IxIcon name="close"></IxIcon>
-            </span>
-          )}
+          {contentNodes}
         </div>
       )
     }