refactor(ui): sort windicss classes

components/collections/teams/Collection.vue

@@ -3,13 +3,13 @@
     <div class="flex items-center group">
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -19,15 +19,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
+          flex
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="toggleShowChildren()"
       >
@@ -112,7 +113,7 @@
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
         :key="`folder-${folder}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :folder="folder"
         :folder-index="index"
         :folder-path="`${collectionIndex}/${index}`"
@@ -132,7 +133,7 @@
       <CollectionsTeamsRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="-1"
@@ -153,17 +154,16 @@
           (collection.requests == undefined || collection.requests.length === 0)
         "
         class="
-          flex
-          items-center
-          text-secondaryLight
-          flex-col
-          p-4
-          justify-center
-          ml-5
           border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-5
+          p-4
+          items-center
+          justify-center
         "
       >
-        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <i class="opacity-50 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("collection_empty") }}
         </span>

components/collections/teams/Folder.vue

@@ -3,13 +3,13 @@
     <div class="flex items-center group">
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -19,15 +19,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
+          flex
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="toggleShowChildren()"
       >
@@ -97,7 +98,7 @@
       <CollectionsTeamsFolder
         v-for="(subFolder, subFolderIndex) in folder.children"
         :key="`subFolder-${subFolderIndex}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :folder="subFolder"
         :folder-index="subFolderIndex"
         :collection-index="collectionIndex"
@@ -117,7 +118,7 @@
       <CollectionsTeamsRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :request="request.request"
         :collection-index="collectionIndex"
         :folder-index="folderIndex"
@@ -137,17 +138,16 @@
           (folder.requests == undefined || folder.requests.length === 0)
         "
         class="
-          flex
-          items-center
-          text-secondaryLight
-          flex-col
-          p-4
-          justify-center
-          ml-5
           border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-5
+          p-4
+          items-center
+          justify-center
         "
       >
-        <i class="material-icons opacity-50 pb-2">folder_open</i>
+        <i class="opacity-50 pb-2 material-icons">folder_open</i>
         <span class="text-xs text-center">
           {{ $t("folder_empty") }}
         </span>

components/collections/teams/Request.vue

@@ -3,15 +3,15 @@
     <div class="flex items-center group">
       <span
         class="
-          font-mono font-bold
+          cursor-pointer
           flex
-          justify-center
-          items-center
+          font-mono font-bold
+          mx-2
           text-xs
           w-12
-          mx-2
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
@@ -29,15 +29,16 @@
       </span>
       <span
         class="
-          py-3
           cursor-pointer
-          pr-2
-          flex flex-1
-          min-w-0
-          text-xs
-          group-hover:text-secondaryDark
-          transition
+          flex
           font-semibold
+          flex-1
+          text-xs
+          min-w-0
+          py-3
+          pr-2
+          transition
+          group-hover:text-secondaryDark
         "
         @click="!doc ? selectRequest() : {}"
       >