feat: update docs

Author: forestxieCode

.dumirc.ts

@@ -27,12 +27,12 @@ export default defineConfig({
     features: {
       'zh-CN': [
         { title: '功能齐全', details: '全面继承 Sortable.js 的所有功能'},
-        { title: '灵活使用', details: '支持组件、指令、函数式调用，总有一款是您喜欢的'},
+        { title: '灵活使用', details: '支持组件、函数式调用，总有一款是您喜欢的'},
         { title: '自定义容器', details: '将指定容器作为拖拽容器'}
       ],
       'en-US': [
         { title: 'Fully functional', details: 'Full inheritance of all the features of Sortable.js'},
-        { title: 'Use flexibly', details: 'Support components, instructions, and function calls, there is always one you like'},
+        { title: 'Use flexibly', details: 'Support components, and function calls, there is always one you like'},
         { title: 'Custom containers', details: 'Drag and drop the specified container'}
       ],
     },

docs/guide/index.en-US.md

@@ -36,7 +36,7 @@ In `Sortablejs` official `React` components in the past, the drag-and-drop list
 
 ```ts
 import React, { useRef, useState } from "react"
-import { ReactDraggablePlush } from 'react-draggable-plus'
+import { ReactDraggablePlush } from "react-draggable-plus"
 const Demo = () => {
   const el = useRef<any>(null)
   const [list, setList] = useState([{

docs/guide/index.zh-CN.md

@@ -32,7 +32,7 @@ nav:
 
 ```ts
 import React, { useRef, useState } from "react"
-import { ReactDraggablePlush } from 'react-draggable-plus'
+import { ReactDraggablePlush } from "react-draggable-plus"
 const Demo = () => {
   const el = useRef<any>(null)
   const [list, setList] = useState([{

src/basic/demo.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react"
-import { ReactDraggablePlush } from 'react-draggable-plus'
+import { ReactDraggablePlush } from "react-draggable-plus"
 import PreviewList from "react-draggable-plus/builtins/PreviewList"
 
 const Demo = () => {

src/custom-clone/demo.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react"
+import { ReactDraggablePlush } from 'react-draggable-plus'
+import PreviewList from "react-draggable-plus/builtins/PreviewList"
+import Sortable from "sortablejs"
+
+const Demo = () => {
+  const data = [
+    {
+      name: 'Joao',
+      id: 1
+    },
+    {
+      name: 'Jean',
+      id: 2
+    },
+    {
+      name: 'Johanna',
+      id: 3
+    },
+    {
+      name: 'Juan',
+      id: 4
+    }
+  ]
+  const [list, setList] = useState(data)
+  const [list2, setList2] = useState(data.map(item => ({
+    name: `${item.name}-2`,
+    id: `${item.id}-2`
+  })))
+
+  const group:Sortable.GroupOptions =  { name: "people", pull: "clone" , put: false }
+
+  const onClone = (element: Record<'name' | 'id', string>) => {
+    const len = list2.length
+    return {
+      name: `${element.name}-clone-${len}`,
+      id: `${element.id}-clone-${len}`
+    }
+  }
+
+  return <>
+  <div className="flex">
+    <ReactDraggablePlush
+      list={list}
+      setList={setList}
+      animation={150}
+      group={ group }
+      sort={false}
+      className="flex flex-col gap-2 p-4 w-300px h-360px m-auto bg-gray-500/5 rounded"
+      clone={onClone}
+    >
+      {
+        list.map(item => {
+          return <div className="cursor-move h-30 bg-gray-500/5 rounded p-3" key={item.id}>{item.name}</div>
+        })
+      }
+    </ReactDraggablePlush>
+    <ReactDraggablePlush
+      list={list2}
+      setList={setList2}
+      animation={150}
+      group="people"
+      className="flex flex-col gap-2 p-4 w-300px h-360px m-auto bg-gray-500/5 rounded"
+    >
+       {
+          list2.map(item => {
+            return <div className="cursor-move h-30 bg-gray-500/5 rounded p-3" key={item.id}>{item.name}</div>
+          })
+        }
+    </ReactDraggablePlush>
+  </div>
+  <div className="flex justify-between">
+    <PreviewList list={list} className="m-auto"></PreviewList>
+    <PreviewList list={list2} className="m-auto"></PreviewList>
+  </div>
+  </>
+}
+
+export default Demo

src/custom-clone/function.tsx

@@ -0,0 +1,93 @@
+import React, { useRef, useState } from "react"
+import { useDraggable } from "react-draggable-plus"
+import PreviewList from "react-draggable-plus/builtins/PreviewList"
+import Sortable from "sortablejs"
+
+const Function = () => {
+  const el1 = useRef<any>(null)
+  const el2 = useRef<any>(null)
+
+  const data = [
+    {
+      name: 'Joao',
+      id: '1'
+    },
+    {
+      name: 'Jean',
+      id: '2'
+    },
+    {
+      name: 'Johanna',
+      id:'3'
+    },
+    {
+      name: 'Juan',
+      id: '4'
+    }
+  ]
+  const group:Sortable.GroupOptions =  { name: "people", pull: "clone", put: false}
+  const [list1, setList1] = useState(data)
+  const [list2, setList2] = useState(data.map(item => ({
+    name: `${item.name}-2`,
+    id: `${item.id}-2`
+  })))
+
+  useDraggable(el1, list1, setList1, {
+    animation: 150,
+    group,
+    sort: false,
+    clone: (element: Record<'name' | 'id', string>) => {
+      const len = list2.length
+      return {
+        name: `${element.name}-clone-${len}`,
+        id: `${element.id}-clone-${len}`
+      }
+    }
+  })
+
+  useDraggable(el2, list2, setList2, {
+    animation: 150,
+    group: 'people',
+  })
+
+  return <>
+  <div className="flex">
+    <div
+      className="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
+      ref={el1}
+    >
+      {
+        list1.map(item => {
+          return <div
+          key={item.id}
+          className="cursor-move h-30 bg-gray-500/5 rounded p-3"
+        >
+          { item.name }
+        </div>
+        })
+      }
+    </div>
+    <div
+      className="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
+      ref={el2}
+    >
+      {
+        list2.map(item => {
+          return <div
+          key={item.id}
+          className="cursor-move h-30 bg-gray-500/5 rounded p-3"
+        >
+          { item.name }
+        </div>
+        })
+      }
+    </div>
+  </div>
+  <div className="flex justify-between">
+  <PreviewList list={list1} className="m-auto"></PreviewList>
+  <PreviewList list={list2} className="m-auto"></PreviewList>
+  </div>
+</>
+}
+
+export default Function

src/custom-clone/index.en-US.md

@@ -0,0 +1,34 @@
+--- 
+title: Custom Clone
+nav:
+  title: Demo
+  order: 4
+toc: content
+---
+
+# Custom Clone
+
+
+We can pass a function through the `clone` attribute to customize the cloned node, and `JSON.parse(JSON.stringify())` is used internally to implement cloning. You can also choose to use `lodash` or other third-party libraries. Clone, this function is commonly used in low-code scenarios, such as dragging form elements to the canvas, and a new component element needs to be cloned.
+
+When we use this function, we need to pay attention to：
+1. The `pull` attribute in the `group` attribute of the cloned component must be `clone`, otherwise it cannot be cloned.
+2. The `name` attribute in the `group` of the cloned component must be consistent with the `name` attribute in the `group` of the cloned component, otherwise it cannot be cloned.
+
+<Alert>
+Note: When we use the `clone` attribute, we need to regenerate a unique `key`, otherwise it will cause the component to render abnormally.
+</Alert>
+
+## Component Usage
+
+<code src="./demo.tsx"
+title="Clone using components"
+description="Pass through the pull.clone attribute of the group to realize clone">
+</code>
+
+## Function Usage
+
+<code src="./function.tsx"
+title="Cloning using function"
+description="Use function to pass options to achieve cloning">
+</code>

src/custom-clone/index.zh-CN.md

@@ -0,0 +1,34 @@
+--- 
+title: 自定义克隆
+nav:
+  title: 演示
+  order: 4
+toc: content
+---
+
+# 自定义克隆
+
+我们可以通过 `clone` 属性传递一个函数，来自定义克隆的节点，内部使用 `JSON.parse(JSON.stringify())`实现克隆，您也可以选择使用 `lodash` 或者其他第三方库的方式进行克隆，此功能常用与低代码场景，比如拖拽表单元素到画布中，需要克隆一个新的组件元素。
+
+我们在使用该功能时，需要注意：
+1. 被克隆组件的 `group` 属性中的 `pull` 属性必须为 `clone`，否则无法克隆。
+2. 被克隆组件中的 `group` 中的 `name` 属性必须与克隆组件的 `group` 中的 `name` 属性一致，否则无法克隆。
+
+<Alert>
+注意：当我们使用 `clone` 属性时，需要重新生成一个唯一的 `key`，否则会导致组件渲染异常。
+</Alert>
+
+## 组件使用
+
+<code src="./demo.tsx"
+title="使用组件自定义克隆"
+description="使用组件属性进行自定义克隆">
+</code>
+
+
+## 函数使用
+
+<code src="./function.tsx"
+title="自定义克隆"
+description="传递 clone 属性，实现自定义克隆">
+</code>