style: fix linting code using prettier v2.5.0

app.vue

@@ -1,14 +1,6 @@
 <template>
   <main
-    class="
-      w-screen
-      h-screen
-      text-gray-900
-      transition-colors
-      duration-150
-      bg-gray-100
-      dark:text-gray-100 dark:bg-gray-900
-    "
+    class="w-screen h-screen text-gray-900 transition-colors duration-150 bg-gray-100 dark:text-gray-100 dark:bg-gray-900"
   >
     <v-header />
     <nuxt-page class="-my-10 py-10" />

components/common/ui/VFooter.vue

@@ -1,30 +1,14 @@
 <template>
   <div
-    class="
-      flex
-      items-center
-      justify-between
-      w-full
-      h-10
-      px-4
-      border-t border-gray-300
-      dark:border-gray-700
-    "
+    class="flex items-center justify-between w-full h-10 px-4 border-t border-gray-300 dark:border-gray-700"
   >
     <p class="text-sm">
       Made with <span class="animate-pulse">❤️</span> by
       <a href="https://vinayakkulkarni.dev">@Vinayak</a> &copy;
       {{ state.date }}
     </p>
     <div
-      class="
-        flex
-        items-center
-        justify-center
-        space-x-2
-        md:space-x-3
-        lg:space-x-4
-      "
+      class="flex items-center justify-center space-x-2 md:space-x-3 lg:space-x-4"
     >
       <span class="text-sm font-light opacity-50">
         (v{{ state.appVersion }})

components/common/ui/VHeader.vue

@@ -1,28 +1,11 @@
 <template>
   <div
-    class="
-      flex
-      items-center
-      justify-between
-      w-full
-      h-10
-      px-4
-      border-b border-gray-300
-      shadow
-      dark:border-gray-700
-    "
+    class="flex items-center justify-between w-full h-10 px-4 border-b border-gray-300 shadow dark:border-gray-700"
   >
     <div title="Dashboard" class="visible">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="
-          w-8
-          h-8
-          transition-colors
-          duration-300
-          cursor-pointer
-          fill-current
-        "
+        class="w-8 h-8 transition-colors duration-300 cursor-pointer fill-current"
         data-name="Layer 1"
         viewBox="0 0 512 512"
         :class="[isDark ? 'text-white' : 'text-gray-900']"

components/map/CommonMap.vue

@@ -18,36 +18,11 @@
       </template>
       <!-- Basemaps -->
       <div
-        class="
-          absolute
-          top-0
-          right-0
-          z-10
-          invisible
-          m-2
-          text-gray-800
-          bg-opacity-50
-          rounded-md
-          dark:text-white
-        "
+        class="absolute top-0 right-0 z-10 invisible m-2 text-gray-800 bg-opacity-50 rounded-md dark:text-white"
       >
         <div class="relative flex flex-col space-y-2">
           <div
-            class="
-              relative
-              visible
-              w-10
-              h-10
-              text-sm text-gray-600
-              bg-gray-200
-              border border-gray-100
-              rounded-md
-              hover:bg-gray-300
-              dark:bg-gray-800
-              dark:border-gray-700
-              dark:text-white
-              dark:hover:bg-gray-800
-            "
+            class="relative visible w-10 h-10 text-sm text-gray-600 bg-gray-200 border border-gray-100 rounded-md hover:bg-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
             title="Basemaps"
             :class="{
               'bg-gray-300 dark:bg-gray-800': state.utils.basemaps.shown,
@@ -77,20 +52,7 @@
             >
               <div
                 v-if="state.utils.basemaps.shown"
-                class="
-                  absolute
-                  top-0
-                  right-0
-                  w-48
-                  mr-12
-                  origin-right
-                  bg-gray-300
-                  rounded-md
-                  shadow-lg
-                  sm:w-64
-                  dark:bg-gray-700
-                  ring-1 ring-white ring-opacity-5
-                "
+                class="absolute top-0 right-0 w-48 mr-12 origin-right bg-gray-300 rounded-md shadow-lg sm:w-64 dark:bg-gray-700 ring-1 ring-white ring-opacity-5"
               >
                 <basemaps
                   :data="state.utils.basemaps.data"
@@ -104,19 +66,7 @@
       </div>
       <!-- Zoom in, Zoom out, Bearing & Locate Me -->
       <div
-        class="
-          absolute
-          right-0
-          z-10
-          invisible
-          m-2
-          text-gray-800
-          bg-opacity-50
-          rounded-md
-          bottom-12
-          sm:bottom-7
-          dark:text-white
-        "
+        class="absolute right-0 z-10 invisible m-2 text-gray-800 bg-opacity-50 rounded-md bottom-12 sm:bottom-7 dark:text-white"
       >
         <div class="relative flex flex-col space-y-2">
           <!-- Zoom in & out -->
@@ -126,21 +76,7 @@
           >
             <!-- Zoom In -->
             <div
-              class="
-                w-10
-                h-10
-                p-2
-                text-sm text-gray-600
-                bg-gray-200
-                border border-b-0 border-gray-100
-                rounded-md rounded-b-none
-                cursor-pointer
-                hover:bg-gray-300
-                dark:bg-gray-800
-                dark:border-gray-700
-                dark:text-white
-                dark:hover:bg-gray-800
-              "
+              class="w-10 h-10 p-2 text-sm text-gray-600 bg-gray-200 border border-b-0 border-gray-100 rounded-md rounded-b-none cursor-pointer hover:bg-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
               title="Zoom In"
               @click="mapZoomIn"
             >
@@ -161,21 +97,7 @@
             </div>
             <!-- Zoom Out -->
             <div
-              class="
-                w-10
-                h-10
-                p-2
-                text-sm text-gray-600
-                bg-gray-200
-                border border-t-0 border-gray-100
-                rounded-md rounded-t-none
-                cursor-pointer
-                hover:bg-gray-300
-                dark:bg-gray-800
-                dark:border-gray-700
-                dark:text-white
-                dark:hover:bg-gray-800
-              "
+              class="w-10 h-10 p-2 text-sm text-gray-600 bg-gray-200 border border-t-0 border-gray-100 rounded-md rounded-t-none cursor-pointer hover:bg-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
               title="Zoom Out"
               @click="mapZoomOut"
             >
@@ -197,21 +119,7 @@
           </div>
           <!-- Bearing -->
           <div
-            class="
-              relative
-              visible
-              w-10
-              h-10
-              text-sm text-gray-600
-              bg-gray-200
-              border border-gray-100
-              rounded-md
-              hover:bg-gray-300
-              dark:bg-gray-800
-              dark:border-gray-700
-              dark:text-white
-              dark:hover:bg-gray-800
-            "
+            class="relative visible w-10 h-10 text-sm text-gray-600 bg-gray-200 border border-gray-100 rounded-md hover:bg-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
             title="Locate Me"
             :class="{
               'bg-gray-300 dark:bg-gray-800': state.utils.compass.shown,
@@ -220,15 +128,7 @@
             <div class="p-2 cursor-pointer" @click="toggleTool('compass')">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="
-                  w-5
-                  h-5
-                  transition-all
-                  duration-100
-                  ease-linear
-                  transform
-                  fill-current
-                "
+                class="w-5 h-5 transition-all duration-100 ease-linear transform fill-current"
                 viewBox="0 0 18 18"
                 :style="{
                   transform:
@@ -243,21 +143,7 @@
           </div>
           <!-- Locate -->
           <div
-            class="
-              relative
-              visible
-              w-10
-              h-10
-              text-sm text-gray-600
-              bg-gray-200
-              border border-gray-100
-              rounded-md
-              hover:bg-gray-300
-              dark:bg-gray-800
-              dark:border-gray-700
-              dark:text-white
-              dark:hover:bg-gray-800
-            "
+            class="relative visible w-10 h-10 text-sm text-gray-600 bg-gray-200 border border-gray-100 rounded-md hover:bg-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
             title="Locate Me"
           >
             <div class="p-2 cursor-pointer" @click="toggleTool('locate')">

components/map/_partials/Basemaps.vue

@@ -11,16 +11,7 @@
       class="select-none"
     >
       <div
-        class="
-          flex
-          items-center
-          justify-between
-          p-2
-          rounded
-          shadow
-          cursor-pointer
-          hover:shadow-md
-        "
+        class="flex items-center justify-between p-2 rounded shadow cursor-pointer hover:shadow-md"
         :class="{
           'text-white bg-gradient-to-l from-purple-600 to-purple-800':
             basemap.enabled,

components/map/_partials/Geocoder.vue

@@ -6,44 +6,19 @@
       v-model="state.search"
       type="text"
       name="geocoder"
-      class="
-        block
-        w-full
-        h-full
-        dark:bg-gray-800 dark:text-gray-50
-        bg-opacity-25 bg-gray-200
-        text-gray-900
-        rounded-md
-        shadow-sm
-        sm:text-sm
-      "
+      class="block w-full h-full dark:bg-gray-800 dark:text-gray-50 bg-opacity-25 bg-gray-200 text-gray-900 rounded-md shadow-sm sm:text-sm"
       placeholder="eg. Mumbai"
       autofocus
       @input="geocode"
     />
     <div
       v-if="state.results.length > 0"
-      class="
-        flex flex-col
-        mt-1
-        overflow-auto
-        divide-y divide-gray-100
-        dark:divide-gray-500
-      "
+      class="flex flex-col mt-1 overflow-auto divide-y divide-gray-100 dark:divide-gray-500"
     >
       <div
         v-for="({ label, lng, lat, zoom }, index) in state.results"
         :key="index"
-        class="
-          flex-1
-          px-1
-          truncate
-          bg-gray-200 bg-opacity-50
-          dark:bg-gray-800
-          cursor-pointer
-          select-none
-          hover:bg-opacity-100
-        "
+        class="flex-1 px-1 truncate bg-gray-200 bg-opacity-50 dark:bg-gray-800 cursor-pointer select-none hover:bg-opacity-100"
         :title="label"
         @click="$emit('fly-to', { lng, lat, zoom })"
       >

components/map/layers/Markers.vue

@@ -38,29 +38,10 @@
         @close="$emit('update:visibility', false)"
       >
         <div
-          class="
-            flex flex-col
-            items-start
-            justify-center
-            text-white
-            border border-gray-700
-            rounded-md
-            shadow-lg
-            bg-gradient-to-tr
-            from-gray-700
-            to-gray-800
-          "
+          class="flex flex-col items-start justify-center text-white border border-gray-700 rounded-md shadow-lg bg-gradient-to-tr from-gray-700 to-gray-800"
         >
           <div
-            class="
-              flex
-              items-center
-              justify-between
-              w-full
-              px-3
-              py-1
-              border-b border-gray-600
-            "
+            class="flex items-center justify-between w-full px-3 py-1 border-b border-gray-600"
           >
             <div v-if="marker.properties" class="capitalize">
               {{ marker.properties.expense.type }}
@@ -77,14 +58,7 @@
             </div>
           </div>
           <div
-            class="
-              flex flex-col
-              items-start
-              justify-between
-              px-3
-              py-1
-              space-y-1
-            "
+            class="flex flex-col items-start justify-between px-3 py-1 space-y-1"
           >
             <div
               v-if="marker.properties && marker.properties.expense.amount"