fix: fix some type errors (#177)

Author: ArthurDarkstone

src/__docs__/custom-clone/demo.vue

@@ -2,7 +2,7 @@
   <div class="flex">
     <VueDraggable
       v-model="list1"
-      animation="150"
+      :animation="150"
       ghostClass="ghost"
       :group="{ name: 'people', pull: 'clone', put: false }"
       :clone="clone"
@@ -19,7 +19,7 @@
     </VueDraggable>
     <VueDraggable
       v-model="list2"
-      animation="150"
+      :animation="150"
       group="people"
       ghostClass="ghost"
       class="flex flex-col gap-2 p-4 w-300px max-h-350px m-auto bg-gray-500/5 rounded overflow-auto"

src/__docs__/handle/directive.vue

@@ -24,7 +24,12 @@
 import { ref } from 'vue'
 import { vDraggable } from 'vue-draggable-plus'
 
-const list = ref([
+const list = ref<
+  {
+    name: string
+    id: string
+  }[]
+>([
   {
     name: 'Joao',
     id: '1'

src/__docs__/nested/index.en-US.md

@@ -7,11 +7,14 @@ map:
 
 We can use recursive components to achieve nested effects
 
+When using this feature, please note: When using nested components, the recursive component name should be consistent with the component name. It is recommended to use defineOptions({name:'ComponentName'}).
+
 ::: tip
 This chapter uses the custom two-way binding method. If you don’t know much about it, please refer to the information on custom two-way binding first. `vue2` and `vue3` are different.
 :::
 
 ## Component Usage
+
 <demo src="./demo.vue"
 title="Use Components"
 desc="">
@@ -63,6 +66,7 @@ const list = computed({
 ```
 
 ## Function Usage
+
 <demo src="./function.vue"
 title=""
 desc="Pass function option implementation">
@@ -116,6 +120,7 @@ useDraggable(el, list, {
 ```
 
 ## Directive Usage
+
 <demo src="./directive.vue"
 title="Usage Directive"
 desc="Pass command parameter implementation">

src/__docs__/nested/index.zh-CN.md

@@ -7,11 +7,14 @@ map:
 
 我们可以使用递归组件来实现嵌套的效果。
 
+我们在使用该功能时，需要注意：在使用嵌套组件时，**递归组件名**应与**组件名**保持一致，推荐使用 `defineOptions({name:'ComponentName'})`
+
 ::: tip
 本章使用了自定义双向绑定的方式，如果您对此还不是很了解，请先查阅自定义双向绑定的资料，`vue2` 和 `vue3` 有所不同。
 :::
 
 ## 组件使用
+
 <demo src="./demo.vue"
 title="使用组件方式"
 desc="">
@@ -63,6 +66,7 @@ const list = computed({
 ```
 
 ## 函数使用
+
 <demo src="./function.vue"
 title=""
 desc="传递函数选项实现">
@@ -116,6 +120,7 @@ useDraggable(el, list, {
 ```
 
 ## 指令使用
+
 <demo src="./directive.vue"
 title=""
 desc="传递指令参数实现">

src/__docs__/table-column/demo.vue

@@ -10,7 +10,7 @@
       </thead>
       <tbody>
         <tr v-for="item in list" :key="item.name">
-          <td v-for="header in headers" :key="header">
+          <td v-for="header in headers" :key="header.value">
             {{ item[header.value] }}
           </td>
         </tr>
@@ -23,7 +23,17 @@
 import { ref } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
-const headers = ref([
+type Item = {
+  name: string
+  id: number
+}
+
+type Header = {
+  text: string
+  value: keyof Item
+}
+
+const headers = ref<Header[]>([
   {
     text: 'Id',
     value: 'id'
@@ -33,7 +43,7 @@ const headers = ref([
     value: 'name'
   }
 ])
-const list = ref([
+const list = ref<Item[]>([
   {
     name: 'Joao',
     id: 1

src/__docs__/table-column/directive.vue

@@ -9,7 +9,7 @@
     </thead>
     <tbody>
       <tr v-for="item in list" :key="item.name">
-        <td v-for="header in headers" :key="header">
+        <td v-for="header in headers" :key="header.value">
           {{ item[header.value] }}
         </td>
       </tr>
@@ -20,7 +20,18 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { vDraggable } from 'vue-draggable-plus'
-const headers = ref([
+
+type Item = {
+  name: string
+  id: number
+}
+
+type Header = {
+  text: string
+  value: keyof Item
+}
+
+const headers = ref<Header[]>([
   {
     text: 'Id',
     value: 'id'
@@ -30,7 +41,8 @@ const headers = ref([
     value: 'name'
   }
 ])
-const list = ref([
+
+const list = ref<Item[]>([
   {
     name: 'Joao',
     id: 1

src/__docs__/table-column/function.vue

@@ -9,7 +9,7 @@
     </thead>
     <tbody>
       <tr v-for="item in list" :key="item.name">
-        <td v-for="header in headers" :key="header">
+        <td v-for="header in headers" :key="header.value">
           {{ item[header.value] }}
         </td>
       </tr>
@@ -21,7 +21,17 @@
 import { ref } from 'vue'
 import { useDraggable } from 'vue-draggable-plus'
 
-const headers = ref([
+type Item = {
+  name: string
+  id: number
+}
+
+type Header = {
+  text: string
+  value: keyof Item
+}
+
+const headers = ref<Header[]>([
   {
     text: 'Id',
     value: 'id'
@@ -31,7 +41,8 @@ const headers = ref([
     value: 'name'
   }
 ])
-const list = ref([
+
+const list = ref<Item[]>([
   {
     name: 'Joao',
     id: 1

src/__docs__/table/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <VueDraggable v-model="list" target=".sort-target" animation="150">
+  <VueDraggable v-model="list" target=".sort-target" :animation="150">
     <table>
       <thead>
         <tr>

src/__docs__/target-container/demo.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
     <div>
-      <VueDraggable v-model="list" animation="150" target=".el-table">
+      <VueDraggable v-model="list" :animation="150" target=".el-table">
         <ElTable :list="list"></ElTable>
       </VueDraggable>
     </div>

src/__docs__/transitions/demo.vue

@@ -3,7 +3,7 @@
   <div class="flex justify-between">
     <VueDraggable
       v-model="list"
-      animation="150"
+      :animation="150"
       target=".sort-target"
       class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
       @start="onStart"
@@ -12,11 +12,11 @@
       <TransitionGroup
         type="transition"
         tag="ul"
-        :name="!drag ? 'fade' : null"
+        :name="!drag ? 'fade' : undefined"
         class="sort-target"
       >
         <li
-          v-for="(item, index) in list"
+          v-for="item in list"
           :key="item.id"
           class="cursor-move h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
         >