docs: fix docs style (#186)

Author: ArthurDarkstone

src/__docs__/handle/demo.vue

@@ -11,7 +11,7 @@
       <div
         v-for="(item, index) in list"
         :key="item.id"
-        class="h-50px bg-gray-500/5 rounded flex items-center justify-between px-4"
+        class="h-50px bg-gray-500/5 px-2 rounded flex items-center justify-between"
       >
         <IconSort class="handle cursor-move"></IconSort>
         <input type="text" v-model="item.name" />

src/__docs__/handle/directive.vue

@@ -4,12 +4,12 @@
   <div class="flex justify-between">
     <section
       v-draggable="[list, { animation: 150, handle: '.handle' }]"
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+      class="flex flex-col p-4 gap-2 w-300px bg-gray-500/5 rounded"
     >
       <div
         v-for="(item, index) in list"
         :key="item.id"
-        class="h-50px bg-gray-500/5 rounded flex items-center justify-between px-4"
+        class="h-50px bg-gray-500/5 rounded flex p-4 items-center justify-between px-2"
       >
         <IconSort class="handle cursor-move"></IconSort>
         <input type="text" v-model="item.name" />

src/__docs__/handle/function.vue

@@ -4,12 +4,12 @@
   <div class="flex justify-between">
     <section
       ref="el"
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+      class="flex flex-col p-4 gap-2 w-300px bg-gray-500/5 rounded"
     >
       <div
         v-for="(item, index) in list"
         :key="item.id"
-        class="h-50px bg-gray-500/5 rounded flex items-center justify-between px-4"
+        class="h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
       >
         <IconSort class="handle cursor-move"></IconSort>
         <input type="text" v-model="item.name" />

src/__docs__/table-column/index.en-US.md

@@ -9,19 +9,20 @@ We specify the thead of the table as the [target container](../target-container/
 ## Component Usage
 
 <demo src="./demo.vue"
-title="使用组件完成表格列排序"
-desc="拖拽表头进行列排序">
+title="Using component to sort table columns"
+desc="Drag the header to sort columns">
 </demo>
 
 ## Function Usage
+
 <demo src="./function.vue"
-title="使用函数完成表格列排序"
-desc="拖拽表头进行列排序">
+title="Using function to sort table columns"
+desc="Drag the header to sort columns">
 </demo>
 
-
 ## Directive Usage
+
 <demo src="./directive.vue"
-title="使用指令完成表格列排序"
-desc="拖拽表头进行列排序">
+title="Using directive to sort table columns"
+desc="Drag the header to sort columns">
 </demo>

src/__docs__/transition/demo.vue

@@ -4,7 +4,7 @@
   <div class="flex justify-between">
     <VueDraggable
       v-model="list"
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+      class="flex flex-col gap-2 w-300px bg-gray-500/5 rounded"
       target=".sort-target"
       :scroll="true"
     >
@@ -81,4 +81,7 @@ function remove(index: number) {
 .fade-leave-active {
   position: absolute;
 }
+.sort-target {
+  padding: 0 1rem;
+}
 </style>

src/__docs__/transition/directive.vue

@@ -7,7 +7,7 @@
       type="transition"
       tag="ul"
       name="fade"
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+      class="flex flex-col p-4 w-300px bg-gray-500/5 rounded"
     >
       <li
         v-for="(item, index) in list"

src/__docs__/transition/function.vue

@@ -7,12 +7,12 @@
       type="transition"
       tag="ul"
       name="fade"
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+      class="flex flex-col p-4 w-300px bg-gray-500/5 rounded"
     >
       <li
         v-for="(item, index) in list"
         :key="item.id"
-        class="h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
+        class="h-50px bg-gray-500/5 rounded flex items-center justify-between px-2 m-0"
       >
         <IconSort class="handle cursor-move"></IconSort>
         <input type="text" v-model="item.name" />

src/__docs__/transitions/demo.vue

@@ -5,7 +5,7 @@
       v-model="list"
       :animation="150"
       target=".sort-target"
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+      class="flex flex-col gap-2 pr-4 w-300px bg-gray-500/5 rounded"
       @start="onStart"
       @end="onEnd"
     >

src/__docs__/transitions/directive.vue

@@ -3,7 +3,7 @@
   <div class="flex justify-between">
     <TransitionGroup
       v-draggable="[list, { animation: 150, onStart, onEnd }]"
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+      class="flex flex-col p-4 w-300px bg-gray-500/5 rounded"
       type="transition"
       tag="ul"
       :name="!drag ? 'fade' : undefined"

src/__docs__/transitions/function.vue

@@ -2,7 +2,7 @@
   <button @click="sort">还原</button>
   <div class="flex justify-between">
     <TransitionGroup
-      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
+      class="flex flex-col p-4 w-300px bg-gray-500/5 rounded"
       ref="el"
       type="transition"
       tag="ul"