refactor(ui): sort windicss classes

components/collections/graphql/Add.vue

@@ -5,8 +5,8 @@
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
-        <label for="selectLabelGqlAdd" class="px-4 font-semibold pb-4 text-xs">
+      <div class="flex flex-col px-2">
+        <label for="selectLabelGqlAdd" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/AddFolder.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelGqlAddFolder"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
         >
           {{ $t("label") }}
         </label>

components/collections/graphql/Collection.vue

@@ -11,13 +11,13 @@
     >
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -27,15 +27,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()"
       >
@@ -99,7 +100,7 @@
       <CollectionsGraphqlFolder
         v-for="(folder, index) in collection.folders"
         :key="`folder-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="folder"
@@ -116,7 +117,7 @@
       <CollectionsGraphqlRequest
         v-for="(request, index) in collection.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :picked="picked"
         :saving-mode="savingMode"
         :request="request"
@@ -134,17 +135,16 @@
           collection.folders.length === 0 && 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/graphql/Edit.vue

@@ -7,8 +7,8 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
-        <label for="selectLabelGqlEdit" class="px-4 font-semibold pb-4 text-xs">
+      <div class="flex flex-col px-2">
+        <label for="selectLabelGqlEdit" class="font-semibold text-xs px-4 pb-4">
           {{ $t("label") }}
         </label>
         <input

components/collections/graphql/EditFolder.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelGqlEditFolder"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
         >
           {{ $t("label") }}
         </label>

components/collections/graphql/EditRequest.vue

@@ -7,10 +7,10 @@
       </div>
     </template>
     <template #body>
-      <div class="px-2 flex flex-col">
+      <div class="flex flex-col px-2">
         <label
           for="selectLabelGqlEditReq"
-          class="px-4 font-semibold pb-4 text-xs"
+          class="font-semibold text-xs px-4 pb-4"
         >
           {{ $t("label") }}
         </label>

components/collections/graphql/Folder.vue

@@ -11,13 +11,13 @@
     >
       <span
         class="
+          cursor-pointer
           flex
-          justify-center
-          items-center
           text-xs
           w-10
+          justify-center
+          items-center
           truncate
-          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -27,15 +27,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()"
       >
@@ -95,7 +96,7 @@
       <CollectionsGraphqlFolder
         v-for="(subFolder, subFolderIndex) in folder.folders"
         :key="`subFolder-${subFolderIndex}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :picked="picked"
         :saving-mode="savingMode"
         :folder="subFolder"
@@ -112,7 +113,7 @@
       <CollectionsGraphqlRequest
         v-for="(request, index) in folder.requests"
         :key="`request-${index}`"
-        class="ml-5 border-l border-dividerLight"
+        class="border-l border-dividerLight ml-5"
         :picked="picked"
         :saving-mode="savingMode"
         :request="request"
@@ -133,17 +134,16 @@
           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/graphql/Request.vue

@@ -10,15 +10,15 @@
     >
       <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
         "
         @click="!doc ? selectRequest() : {}"
       >
@@ -28,15 +28,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() : {}"
       >

components/collections/graphql/index.vue

@@ -4,7 +4,7 @@
     :class="{ 'rounded-lg border-2 border-divider': savingMode }"
   >
     <div
-      class="flex flex-col sticky top-10 z-10"
+      class="flex flex-col top-10 z-10 sticky"
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
@@ -13,17 +13,18 @@
         type="search"
         :placeholder="$t('search')"
         class="
-          px-4
-          py-3
-          text-xs
-          border-b border-dividerLight
-          flex flex-1
-          font-medium
           bg-primaryLight
+          border-b border-dividerLight
+          flex
+          font-medium
+          flex-1
+          text-xs
+          py-3
+          px-4
           focus:outline-none
         "
       />
-      <div class="border-b flex justify-between flex-1 border-dividerLight">
+      <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"
           :label="$t('new')"
@@ -59,18 +60,18 @@
     </div>
     <div
       v-if="collections.length === 0"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">create_new_folder</i>
+      <i class="opacity-50 pb-2 material-icons">create_new_folder</i>
       <span class="text-xs text-center">
         {{ $t("create_new_collection") }}
       </span>
     </div>
     <div
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
-      class="flex items-center text-secondaryLight flex-col p-4 justify-center"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
-      <i class="material-icons opacity-50 pb-2">manage_search</i>
+      <i class="opacity-50 pb-2 material-icons">manage_search</i>
       <span class="text-xs text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>