feat: enable drag sorting for plugin market repos

src/components/dialog/PluginMarketSettingDialog.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import api from '@/api'
+import draggable from 'vuedraggable'
 import { useToast } from 'vue-toastification'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
@@ -107,18 +108,8 @@ function formatRepoDisplay(url: string) {
   return url
 }
 
-function moveUp(index: number) {
+function repoItemKey(repo: string) {
-  if (index === 0) return
+  return repo
-  const temp = repoList.value[index]
-  repoList.value[index] = repoList.value[index - 1]
-  repoList.value[index - 1] = temp
-}
-
-function moveDown(index: number) {
-  if (index === repoList.value.length - 1) return
-  const temp = repoList.value[index]
-  repoList.value[index] = repoList.value[index + 1]
-  repoList.value[index + 1] = temp
 }
 
 onMounted(() => {
@@ -155,25 +146,25 @@ onMounted(() => {
 
         <div class="plugin-market-list-wrap">
           <VList v-if="repoList.length > 0" class="px-0">
-            <template v-for="(repo, index) in repoList" :key="index">
+            <draggable
+              v-model="repoList"
+              :item-key="repoItemKey"
+              handle=".drag-handle"
+              animation="200"
+              :disabled="editingIndex !== null"
+            >
+              <template #item="{ element: repo, index }">
+                <div>
                   <VListItem class="py-2">
                     <template #prepend>
-                  <div class="d-flex align-center me-2">
                       <VBtn
-                      icon="mdi-chevron-up"
+                        icon="mdi-drag-vertical"
-                      size="x-small"
+                        size="small"
                         variant="text"
-                      @click="moveUp(index)"
+                        color="primary"
-                      :disabled="index === 0"
+                        class="drag-handle me-2"
+                        :disabled="editingIndex !== null"
                       />
-                    <VBtn
-                      icon="mdi-chevron-down"
-                      size="x-small"
-                      variant="text"
-                      @click="moveDown(index)"
-                      :disabled="index === repoList.length - 1"
-                    />
-                  </div>
                     </template>
 
                     <VListItemTitle v-if="editingIndex !== index">
@@ -193,7 +184,13 @@ onMounted(() => {
                     <template #append v-if="editingIndex !== index">
                       <div class="d-flex align-center">
                         <IconBtn icon="mdi-pencil" size="small" variant="text" @click="startEdit(index)" />
-                    <IconBtn icon="mdi-delete" size="small" variant="text" color="error" @click="removeRepo(index)" />
+                        <IconBtn
+                          icon="mdi-delete"
+                          size="small"
+                          variant="text"
+                          color="error"
+                          @click="removeRepo(index)"
+                        />
                       </div>
                     </template>
 
@@ -205,7 +202,9 @@ onMounted(() => {
                     </template>
                   </VListItem>
                   <VDivider v-if="index < repoList.length - 1" class="mx-4" />
+                </div>
               </template>
+            </draggable>
           </VList>
 
           <div v-else class="text-center text-medium-emphasis py-8">