fix: format using prettier

src/components/Avatar.vue

@@ -14,7 +14,8 @@
         h-full
         items-center
         justify-center
-        text-white dark:text-gray-900
+        text-white
+        dark:text-gray-900
         w-full
         text-base
         uppercase

src/components/Charts/BarChart.vue

@@ -1,69 +1,33 @@
 <template>
   <div>
-    <svg
+    <svg ref="chartSvg" :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`" xmlns="http://www.w3.org/2000/svg">
-      ref="chartSvg"
-      :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
-      xmlns="http://www.w3.org/2000/svg"
-    >
       <!-- x Grid Lines -->
-      <path
+      <path v-if="drawXGrid" :d="xGrid" :stroke="gridColor" :stroke-width="gridThickness" stroke-linecap="round"
-        v-if="drawXGrid"
+        fill="transparent" />
-        :d="xGrid"
-        :stroke="gridColor"
-        :stroke-width="gridThickness"
-        stroke-linecap="round"
-        fill="transparent"
-      />
 
       <!-- zero line -->
-      <path
+      <path v-if="drawZeroLine" :d="zLine" :stroke="zeroLineColor" :stroke-width="gridThickness" stroke-linecap="round"
-        v-if="drawZeroLine"
+        fill="transparent" />
-        :d="zLine"
-        :stroke="zeroLineColor"
-        :stroke-width="gridThickness"
-        stroke-linecap="round"
-        fill="transparent"
-      />
 
       <!-- Axis -->
-      <path
+      <path v-if="drawAxis" :d="axis" :stroke-width="axisThickness" :stroke="axisColor" fill="transparent" />
-        v-if="drawAxis"
-        :d="axis"
-        :stroke-width="axisThickness"
-        :stroke="axisColor"
-        fill="transparent"
-      />
 
       <!-- x Labels -->
       <template v-if="xLabels.length > 0">
-        <text
+        <text v-for="(i, j) in count" :key="j + '-xlabels'" :style="fontStyle" :y="viewBoxHeight -
-          v-for="(i, j) in count"
-          :key="j + '-xlabels'"
-          :style="fontStyle"
-          :y="
-            viewBoxHeight -
           axisPadding +
           yLabelOffset +
           fontStyle.fontSize / 2 -
           bottom
-          "
+          " :x="xs[i - 1]" text-anchor="middle">
-          :x="xs[i - 1]"
-          text-anchor="middle"
-        >
           {{ j % skipXLabel === 0 ? formatX(xLabels[i - 1] || '') : '' }}
         </text>
       </template>
 
       <!-- y Labels -->
       <template v-if="yLabelDivisions > 0">
-        <text
+        <text v-for="(i, j) in yLabelDivisions + 1" :key="j + '-ylabels'" :style="fontStyle" :y="yScalerLocation(i - 1)"
-          v-for="(i, j) in yLabelDivisions + 1"
+          :x="axisPadding - xLabelOffset + left" text-anchor="end">
-          :key="j + '-ylabels'"
-          :style="fontStyle"
-          :y="yScalerLocation(i - 1)"
-          :x="axisPadding - xLabelOffset + left"
-          text-anchor="end"
-        >
           {{ yScalerValue(i - 1) }}
         </text>
       </template>
@@ -73,54 +37,21 @@
           <rect x="0" y="0" :width="viewBoxWidth" :height="z" />
         </clipPath>
         <clipPath id="negative-rect-clip">
-          <rect
+          <rect x="0" :y="z" :width="viewBoxWidth" :height="viewBoxHeight - z" />
-            x="0"
-            :y="z"
-            :width="viewBoxWidth"
-            :height="viewBoxHeight - z"
-          />
         </clipPath>
       </defs>
 
-      <rect
+      <rect v-for="(rec, i) in positiveRects" :key="i + 'prec'" :rx="radius" :ry="radius" :x="rec.x" :y="rec.y"
-        v-for="(rec, i) in positiveRects"
+        :width="width" :height="rec.height" :fill="rec.color" clip-path="url(#positive-rect-clip)"
-        :key="i + 'prec'"
+        @mouseenter="() => create(rec.xi, rec.yi)" @mousemove="update" @mouseleave="destroy" />
-        :rx="radius"
-        :ry="radius"
-        :x="rec.x"
-        :y="rec.y"
-        :width="width"
-        :height="rec.height"
-        :fill="rec.color"
-        clip-path="url(#positive-rect-clip)"
-        @mouseenter="() => create(rec.xi, rec.yi)"
-        @mousemove="update"
-        @mouseleave="destroy"
-      />
 
-      <rect
+      <rect v-for="(rec, i) in negativeRects" :key="i + 'nrec'" :rx="radius" :ry="radius" :x="rec.x" :y="rec.y"
-        v-for="(rec, i) in negativeRects"
+        :width="width" :height="rec.height" :fill="rec.color" clip-path="url(#negative-rect-clip)"
-        :key="i + 'nrec'"
+        @mouseenter="() => create(rec.xi, rec.yi)" @mousemove="update" @mouseleave="destroy" />
-        :rx="radius"
-        :ry="radius"
-        :x="rec.x"
-        :y="rec.y"
-        :width="width"
-        :height="rec.height"
-        :fill="rec.color"
-        clip-path="url(#negative-rect-clip)"
-        @mouseenter="() => create(rec.xi, rec.yi)"
-        @mousemove="update"
-        @mouseleave="destroy"
-      />
     </svg>
-    <Tooltip
+    <Tooltip ref="tooltip" :offset="15" placement="top"
-      ref="tooltip"
-      :offset="15"
-      placement="top"
       class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 border-s-4"
-      :style="{ borderColor: activeColor }"
+      :style="{ borderColor: activeColor }">
-    >
       <div class="flex flex-col justify-center items-center">
         <p>
           {{ xi > -1 ? formatX(xLabels[xi]) : '' }}
@@ -215,8 +146,7 @@ export default {
       return Math.max(...this.points.flat());
     },
     axis() {
-      return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${
+      return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${this.viewBoxHeight - this.axisPadding - this.bottom
-        this.viewBoxHeight - this.axisPadding - this.bottom
         } H ${this.viewBoxWidth - this.axisPadding}`;
     },
     padding() {

src/components/Charts/LineChart.vue

@@ -1,60 +1,30 @@
 <template>
   <div>
-    <svg
+    <svg ref="chartSvg" :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`" xmlns="http://www.w3.org/2000/svg"
-      ref="chartSvg"
+      @mousemove="update">
-      :viewBox="`0 0 ${viewBoxWidth} ${viewBoxHeight}`"
-      xmlns="http://www.w3.org/2000/svg"
-      @mousemove="update"
-    >
       <!-- x Grid Lines -->
-      <path
+      <path v-if="drawXGrid" :d="xGrid" :stroke="gridColor" :stroke-width="gridThickness" stroke-linecap="round"
-        v-if="drawXGrid"
+        fill="transparent" />
-        :d="xGrid"
-        :stroke="gridColor"
-        :stroke-width="gridThickness"
-        stroke-linecap="round"
-        fill="transparent"
-      />
 
       <!-- Axis -->
-      <path
+      <path v-if="drawAxis" :d="axis" :stroke-width="axisThickness" :stroke="axisColor" fill="transparent" />
-        v-if="drawAxis"
-        :d="axis"
-        :stroke-width="axisThickness"
-        :stroke="axisColor"
-        fill="transparent"
-      />
 
       <!-- x Labels -->
       <template v-if="drawLabels && xLabels.length > 0">
-        <text
+        <text v-for="(i, j) in count" :key="j + '-xlabels'" :style="fontStyle" :y="viewBoxHeight -
-          v-for="(i, j) in count"
-          :key="j + '-xlabels'"
-          :style="fontStyle"
-          :y="
-            viewBoxHeight -
           axisPadding +
           yLabelOffset +
           fontStyle.fontSize / 2 -
           bottom
-          "
+          " :x="xs[i - 1]" text-anchor="middle">
-          :x="xs[i - 1]"
-          text-anchor="middle"
-        >
           {{ formatX(xLabels[i - 1] || '') }}
         </text>
       </template>
 
       <!-- y Labels -->
       <template v-if="drawLabels && yLabelDivisions > 0">
-        <text
+        <text v-for="(i, j) in yLabelDivisions + 1" :key="j + '-ylabels'" :style="fontStyle" :y="yScalerLocation(i - 1)"
-          v-for="(i, j) in yLabelDivisions + 1"
+          :x="axisPadding - xLabelOffset + left" text-anchor="end">
-          :key="j + '-ylabels'"
-          :style="fontStyle"
-          :y="yScalerLocation(i - 1)"
-          :x="axisPadding - xLabelOffset + left"
-          text-anchor="end"
-        >
           {{ yScalerValue(i - 1) }}
         </text>
       </template>
@@ -68,58 +38,28 @@
         </linearGradient>
 
         <mask v-for="(i, j) in num" :id="'rect-mask-' + i" :key="j + '-mask'">
-          <rect
+          <rect x="0" :y="gradY(j)" :height="viewBoxHeight - gradY(j)" width="100%" fill="url('#grad')" />
-            x="0"
-            :y="gradY(j)"
-            :height="viewBoxHeight - gradY(j)"
-            width="100%"
-            fill="url('#grad')"
-          />
         </mask>
       </defs>
 
       <g v-for="(i, j) in num" :key="j + '-gpath'">
         <!-- Gradient Paths -->
-        <path
+        <path stroke-linejoin="round" :d="getGradLine(i - 1)" :stroke-width="thickness" stroke-linecap="round"
-          stroke-linejoin="round"
+          :fill="colors[i - 1] || getRandomColor()" :mask="`url('#rect-mask-${i}')`" />
-          :d="getGradLine(i - 1)"
-          :stroke-width="thickness"
-          stroke-linecap="round"
-          :fill="colors[i - 1] || getRandomColor()"
-          :mask="`url('#rect-mask-${i}')`"
-        />
 
         <!-- Lines -->
-        <path
+        <path stroke-linejoin="round" :d="getLine(i - 1)" :stroke="colors[i - 1] || getRandomColor()"
-          stroke-linejoin="round"
+          :stroke-width="thickness" stroke-linecap="round" fill="transparent" />
-          :d="getLine(i - 1)"
-          :stroke="colors[i - 1] || getRandomColor()"
-          :stroke-width="thickness"
-          stroke-linecap="round"
-          fill="transparent"
-        />
       </g>
 
       <!-- Tooltip Reference -->
-      <circle
+      <circle v-if="xi > -1 && yi > -1" r="12" :cx="cx" :cy="cy" :fill="colors[yi]" style="
-        v-if="xi > -1 && yi > -1"
-        r="12"
-        :cx="cx"
-        :cy="cy"
-        :fill="colors[yi]"
-        style="
           filter: brightness(115%) drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.25));
-        "
+        " />
-      />
     </svg>
-    <Tooltip
+    <Tooltip v-if="showTooltip" ref="tooltip" :offset="15" placement="top"
-      v-if="showTooltip"
-      ref="tooltip"
-      :offset="15"
-      placement="top"
       class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200 border-s-4"
-      :style="{ borderColor: colors[yi] }"
+      :style="{ borderColor: colors[yi] }">
-    >
       <div class="flex flex-col justify-center items-center">
         <p>
           {{ xi > -1 ? formatX(xLabels[xi]) : '' }}
@@ -218,8 +158,7 @@ export default {
       return Math.max(...this.points.flat());
     },
     axis() {
-      return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${
+      return `M ${this.axisPadding + this.left} ${this.axisPadding} V ${this.viewBoxHeight - this.axisPadding - this.bottom
-        this.viewBoxHeight - this.axisPadding - this.bottom
         } H ${this.viewBoxWidth - this.axisPadding}`;
     },
     padding() {

src/components/Controls/AttachImage.vue

@@ -1,48 +1,26 @@
 <template>
-  <div
+  <div class="relative bg-white dark:bg-gray-900 border dark:border-gray-800 flex-center overflow-hidden group" :class="{
-    class="relative bg-white dark:bg-gray-900 border dark:border-gray-800 flex-center overflow-hidden group"
-    :class="{
     rounded: size === 'form',
     'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
     'w-12 h-12 rounded-full': size === 'small',
-    }"
+  }" :title="df?.label" :style="imageSizeStyle">
-    :title="df?.label"
-    :style="imageSizeStyle"
-  >
     <img v-if="value" :src="value" />
     <div v-else :class="[!isReadOnly ? 'group-hover:opacity-90' : '']">
-      <div
+      <div v-if="letterPlaceholder"
-        v-if="letterPlaceholder"
+        class="flex h-full items-center justify-center text-gray-400 dark:text-gray-600 font-semibold w-full text-4xl select-none">
-        class="flex h-full items-center justify-center text-gray-400 dark:text-gray-600 font-semibold w-full text-4xl select-none"
-      >
         {{ letterPlaceholder }}
       </div>
-      <svg
+      <svg v-else class="w-6 h-6 text-gray-300 dark:text-gray-600" viewBox="0 0 24 21"
-        v-else
+        xmlns="http://www.w3.org/2000/svg">
-        class="w-6 h-6 text-gray-300 dark:text-gray-600"
-        viewBox="0 0 24 21"
-        xmlns="http://www.w3.org/2000/svg"
-      >
         <path
           d="M21 3h-4l-2-3H9L7 3H3a3 3 0 00-3 3v12a3 3 0 003 3h18a3 3 0 003-3V6a3 3 0 00-3-3zm-9 14a5 5 0 110-10 5 5 0 010 10z"
-          fill="currentColor"
+          fill="currentColor" fill-rule="nonzero" />
-          fill-rule="nonzero"
-        />
       </svg>
     </div>
-    <div
+    <div class="hidden w-full h-full absolute justify-center items-end" :class="[!isReadOnly ? 'group-hover:flex' : '']"
-      class="hidden w-full h-full absolute justify-center items-end"
+      style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)">
-      :class="[!isReadOnly ? 'group-hover:flex' : '']"
+      <button class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1" @click="handleClick">
-      style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)"
+        <FeatherIcon :name="shouldClear ? 'x' : 'upload'" class="w-4 h-4 text-gray-600 dark:text-gray-400" />
-    >
-      <button
-        class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1"
-        @click="handleClick"
-      >
-        <FeatherIcon
-          :name="shouldClear ? 'x' : 'upload'"
-          class="w-4 h-4 text-gray-600 dark:text-gray-400"
-        />
       </button>
     </div>
   </div>

src/components/FilterDropdown.vue

@@ -34,7 +34,20 @@
                 class="flex items-center justify-between text-base gap-2"
               >
                 <div
-                  class="cursor-pointer w-4 h-4 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 rounded-md group"
+                  class="
+                    cursor-pointer
+                    w-4
+                    h-4
+                    flex
+                    items-center
+                    justify-center
+                    text-gray-600
+                    dark:text-gray-400
+                    hover:text-gray-800
+                    dark:hover:text-gray-300
+                    rounded-md
+                    group
+                  "
                 >
                   <span class="hidden group-hover:inline-block">
                     <feather-icon
@@ -99,7 +112,19 @@
           </template>
         </div>
         <div
-          class="text-base border-t dark:border-gray-800 p-2 flex items-center text-gray-600 dark:text-gray-500 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-875"
+          class="
+            text-base
+            border-t
+            dark:border-gray-800
+            p-2
+            flex
+            items-center
+            text-gray-600
+            dark:text-gray-500
+            cursor-pointer
+            hover:bg-gray-100
+            dark:hover:bg-gray-875
+          "
           @click="addNewFilter"
         >
           <feather-icon name="plus" class="w-4 h-4" />
@@ -133,7 +158,7 @@ const conditions = [
   { label: t`Is Not Empty`, value: 'is not null' },
 ] as const;
 
-type Condition = (typeof conditions)[number]['value'];
+type Condition = typeof conditions[number]['value'];
 
 type Filter = {
   fieldname: string;

src/components/Modal.vue

@@ -6,7 +6,16 @@
       @click="$emit('closemodal')"
     >
       <div
-        class="bg-white dark:bg-gray-850 rounded-lg shadow-2xl border dark:border-gray-800 overflow-hidden inner"
+        class="
+          bg-white
+          dark:bg-gray-850
+          rounded-lg
+          shadow-2xl
+          border
+          dark:border-gray-800
+          overflow-hidden
+          inner
+        "
         v-bind="$attrs"
         @click.stop
       >

src/components/PageHeader.vue

@@ -1,29 +1,18 @@
 <template>
-  <div
+  <div class="px-4 flex justify-between items-center h-row-largest flex-shrink-0 dark:bg-gray-875" :class="[
-    class="px-4 flex justify-between items-center h-row-largest flex-shrink-0 dark:bg-gray-875"
-    :class="[
     border ? 'border-b dark:border-gray-800' : '',
     platform !== 'Windows' ? 'window-drag' : '',
-    ]"
+  ]">
-  >
     <Transition name="spacer">
-      <div
+      <div v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'" class="h-full"
-        v-if="!showSidebar && platform === 'Mac' && languageDirection !== 'rtl'"
+        :class="spacerClass" />
-        class="h-full"
-        :class="spacerClass"
-      />
     </Transition>
 
-    <div
+    <div class="flex items-center window-no-drag gap-4 me-auto"
-      class="flex items-center window-no-drag gap-4 me-auto"
+      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''">
-      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
-    >
       <!-- Nav Group -->
       <PageHeaderNavGroup />
-      <h1
+      <h1 v-if="title" class="text-xl font-semibold select-none whitespace-nowrap dark:text-white">
-        v-if="title"
-        class="text-xl font-semibold select-none whitespace-nowrap dark:text-white"
-      >
         {{ title }}
       </h1>
 
@@ -34,10 +23,8 @@
     </div>
 
     <!-- Right (regular) Slot -->
-    <div
+    <div class="flex items-stretch window-no-drag gap-2 ms-auto"
-      class="flex items-stretch window-no-drag gap-2 ms-auto"
+      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''">
-      :class="platform === 'Mac' && languageDirection === 'rtl' ? 'me-18' : ''"
-    >
       <slot />
     </div>
   </div>

src/components/PageHeaderNavGroup.vue

@@ -4,7 +4,11 @@
     <!-- Back Button -->
     <a
       ref="backlink"
-      class="nav-link border-l border-r border-white dark:border-gray-850 dark:bg-gray-900"
+      class="
+        nav-link
+        border-l border-r border-white
+        dark:border-gray-850 dark:bg-gray-900
+      "
       :class="
         historyState.back
           ? 'text-gray-700 dark:text-gray-300 cursor-pointer'

src/components/Paginator.vue

@@ -1,6 +1,13 @@
 <template>
   <div
-    class="grid grid-cols-3 text-gray-800 dark:text-gray-100 text-sm select-none items-center"
+    class="
+      grid grid-cols-3
+      text-gray-800
+      dark:text-gray-100
+      text-sm
+      select-none
+      items-center
+    "
     style="height: 50px"
   >
     <!-- Length Display -->
@@ -25,7 +32,14 @@
       <div class="flex gap-1 bg-gray-100 dark:bg-gray-890 rounded">
         <input
           type="number"
-          class="w-7 text-end outline-none bg-transparent focus:text-gray-900 dark:focus:text-gray-25"
+          class="
+            w-7
+            text-end
+            outline-none
+            bg-transparent
+            focus:text-gray-900
+            dark:focus:text-gray-25
+          "
           :value="pageNo"
           min="1"
           :max="maxPages"
@@ -52,7 +66,13 @@
     <!-- Count Selector -->
     <div
       v-if="filteredCounts.length"
-      class="border border-gray-100 dark:border-gray-800 rounded flex justify-self-end"
+      class="
+        border border-gray-100
+        dark:border-gray-800
+        rounded
+        flex
+        justify-self-end
+      "
     >
       <template v-for="c in filteredCounts" :key="c + '-count'">
         <button

src/components/Popover.vue

@@ -12,7 +12,17 @@
         v-show="isOpen"
         ref="popover"
         :class="popoverClass"
-        class="bg-white dark:bg-gray-850 rounded-md border dark:border-gray-875 shadow-lg popover-container relative z-10"
+        class="
+          bg-white
+          dark:bg-gray-850
+          rounded-md
+          border
+          dark:border-gray-875
+          shadow-lg
+          popover-container
+          relative
+          z-10
+        "
         :style="{ 'transition-delay': `${isOpen ? entryDelay : exitDelay}ms` }"
       >
         <slot name="content" :toggle-popover="togglePopover"></slot>

src/pages/Dashboard/PeriodSelector.vue

@@ -9,7 +9,20 @@
       }"
     >
       <div
-        class="text-sm flex focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 focus:text-gray-800 dark:focus:text-gray-100 items-center py-1 rounded-md leading-relaxed cursor-pointer"
+        class="
+          text-sm
+          flex
+          focus:outline-none
+          hover:text-gray-800
+          dark:hover:text-gray-100
+          focus:text-gray-800
+          dark:focus:text-gray-100
+          items-center
+          py-1
+          rounded-md
+          leading-relaxed
+          cursor-pointer
+        "
         :class="
           !value
             ? 'text-gray-600 dark:text-gray-500'

src/pages/DatabaseSelector.vue

@@ -7,7 +7,16 @@
     }"
   >
     <div
-      class="w-full w-form shadow-lg rounded-lg border dark:border-gray-800 relative bg-white dark:bg-gray-875"
+      class="
+        w-full w-form
+        shadow-lg
+        rounded-lg
+        border
+        dark:border-gray-800
+        relative
+        bg-white
+        dark:bg-gray-875
+      "
       style="height: 700px"
     >
       <!-- Welcome to Frappe Books -->
@@ -28,11 +37,18 @@
       <div
         data-testid="create-new-file"
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
-        :class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
+        :class="
+          creatingDemo
+            ? ''
+            : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'
+        "
         @click="newDatabase"
       >
         <div class="w-8 h-8 rounded-full bg-blue-500 relative flex-center">
-          <feather-icon name="plus" class="text-white dark:text-gray-900 w-5 h-5" />
+          <feather-icon
+            name="plus"
+            class="text-white dark:text-gray-900 w-5 h-5"
+          />
         </div>
 
         <div>
@@ -48,11 +64,28 @@
       <!-- Existing File (Green Icon) -->
       <div
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
-        :class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
+        :class="
+          creatingDemo
+            ? ''
+            : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'
+        "
         @click="existingDatabase"
       >
-        <div class="w-8 h-8 rounded-full bg-green-500 dark:bg-green-600 relative flex-center">
+        <div
-          <feather-icon name="upload" class="w-4 h-4 text-white dark:text-gray-900" />
+          class="
+            w-8
+            h-8
+            rounded-full
+            bg-green-500
+            dark:bg-green-600
+            relative
+            flex-center
+          "
+        >
+          <feather-icon
+            name="upload"
+            class="w-4 h-4 text-white dark:text-gray-900"
+          />
         </div>
         <div>
           <p class="font-medium dark:text-gray-200">
@@ -68,10 +101,24 @@
       <div
         v-if="!files?.length"
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
-        :class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
+        :class="
+          creatingDemo
+            ? ''
+            : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'
+        "
         @click="createDemo"
       >
-        <div class="w-8 h-8 rounded-full bg-pink-500 dark:bg-pink-600 relative flex-center">
+        <div
+          class="
+            w-8
+            h-8
+            rounded-full
+            bg-pink-500
+            dark:bg-pink-600
+            relative
+            flex-center
+          "
+        >
           <feather-icon name="monitor" class="w-4 h-4 text-white" />
         </div>
         <div>
@@ -91,7 +138,11 @@
           v-for="(file, i) in files"
           :key="file.dbPath"
           class="h-row-largest px-4 flex gap-4 items-center"
-          :class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
+          :class="
+            creatingDemo
+              ? ''
+              : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'
+          "
           :title="t`${file.companyName} stored at ${file.dbPath}`"
           @click="selectFile(file)"
         >
@@ -103,7 +154,8 @@
               flex
               justify-center
               items-center
-              bg-gray-200 dark:bg-gray-800
+              bg-gray-200
+              dark:bg-gray-800
               text-gray-500
               font-semibold
               flex-shrink-0
@@ -117,13 +169,20 @@
               <h2 class="font-medium dark:text-gray-200">
                 {{ file.companyName }}
               </h2>
-              <p class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
+              <p
+                class="
+                  whitespace-nowrap
+                  text-sm text-gray-600
+                  dark:text-gray-400
+                "
+              >
                 {{ formatDate(file.modified) }}
               </p>
             </div>
             <p
               class="
-                text-sm text-gray-600 dark:text-gray-400
+                text-sm text-gray-600
+                dark:text-gray-400
                 overflow-x-auto
                 no-scrollbar
                 whitespace-nowrap
@@ -136,12 +195,15 @@
             class="
               ms-auto
               p-2
-              hover:bg-red-200 dark:hover:bg-red-900 dark:hover:bg-opacity-40
+              hover:bg-red-200
+              dark:hover:bg-red-900 dark:hover:bg-opacity-40
               rounded-full
               w-8
               h-8
-              text-gray-600 dark:text-gray-400
+              text-gray-600
-              hover:text-red-400 dark:hover:text-red-200
+              dark:text-gray-400
+              hover:text-red-400
+              dark:hover:text-red-200
             "
             @click.stop="() => deleteDb(i)"
           >
@@ -160,7 +222,8 @@
           items-center
           absolute
           p-4
-          text-gray-900 dark:text-gray-100
+          text-gray-900
+          dark:text-gray-100
         "
         style="top: 100%; transform: translateY(-100%)"
       >
@@ -169,8 +232,10 @@
           v-if="files?.length"
           class="
             text-sm
-            bg-gray-100 dark:bg-gray-890
+            bg-gray-100
-            hover:bg-gray-200 dark:hover:bg-gray-900
+            dark:bg-gray-890
+            hover:bg-gray-200
+            dark:hover:bg-gray-900
             rounded
             px-4
             py-1.5
@@ -205,14 +270,18 @@
           creating the dummy instance.
         </p>
         <div class="flex my-12 justify-center items-baseline gap-4 text-base">
-          <label for="basecount" class="text-gray-600 dark:text-gray-400">Base Count</label>
+          <label for="basecount" class="text-gray-600 dark:text-gray-400"
+            >Base Count</label
+          >
           <input
             v-model="baseCount"
             type="number"
             name="basecount"
             class="
-              bg-gray-100 dark:bg-gray-875
+              bg-gray-100
-              focus:bg-gray-200 dark:focus:bg-gray-890
+              dark:bg-gray-875
+              focus:bg-gray-200
+              dark:focus:bg-gray-890
               rounded-md
               px-2
               py-1

src/pages/ListView/List.vue

@@ -16,7 +16,14 @@
         <div
           v-for="(column, i) in columns"
           :key="column.label"
-          class="overflow-x-auto no-scrollbar whitespace-nowrap h-row items-center flex"
+          class="
+            overflow-x-auto
+            no-scrollbar
+            whitespace-nowrap
+            h-row
+            items-center
+            flex
+          "
           :class="{
             'ms-auto': isNumeric(column.fieldtype),
             'pe-4': i === columns.length - 1,
@@ -31,7 +38,11 @@
     <!-- Data Rows -->
     <div
       v-if="dataSlice.length !== 0"
-      class="overflow-y-auto dark:dark-scroll custom-scroll custom-scroll-thumb1"
+      class="
+        overflow-y-auto
+        dark:dark-scroll
+        custom-scroll custom-scroll-thumb1
+      "
     >
       <div v-for="(row, i) in dataSlice" :key="(row.name as string)">
         <!-- Row Content -->
@@ -41,7 +52,13 @@
           </p>
           <Row
             gap="1rem"
-            class="cursor-pointer text-gray-900 dark:text-gray-300 flex-1 h-row-mid"
+            class="
+              cursor-pointer
+              text-gray-900
+              dark:text-gray-300
+              flex-1
+              h-row-mid
+            "
             :column-count="columns.length"
             @click="$emit('openDoc', row.name)"
           >

src/utils/colors.ts

@@ -40,11 +40,15 @@ export function getColorClass(
   value = 300,
   darkvalue = 600
 ) {
-  return `${type}-${getValidColor(color)}-${value} dark:${type}-${getValidColor(color)}-${darkvalue}`;
+  return `${type}-${getValidColor(color)}-${value} dark:${type}-${getValidColor(
+    color
+  )}-${darkvalue}`;
 }
 
 export function getTextColorClass(color: string) {
-  return `text-${getValidColor(color)}-700 dark:text-${getValidColor(color)}-200`;
+  return `text-${getValidColor(color)}-700 dark:text-${getValidColor(
+    color
+  )}-200`;
 }
 
 export function getBgTextColorClass(color: string) {