chore: lint

src/components/button/Primary.vue

@@ -2,7 +2,7 @@
   <HoppSmartLink
     :to="to"
     :blank="blank"
-    class="relative inline-flex items-center justify-center whitespace-nowrap py-2 font-semibold transition focus:outline-none focus-visible:bg-accentDark"
+    class="relative inline-flex items-center justify-center py-2 font-semibold whitespace-nowrap transition focus:outline-none focus-visible:bg-accentDark"
     :exact="exact"
     :class="[
       color

src/components/smart/Anchor.vue

@@ -8,7 +8,7 @@
       color
         ? `text-${color}-500 hover:text-${color}-600 focus-visible:text-${color}-600`
         : 'hover:text-secondaryDark focus-visible:text-secondaryDark',
-      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'cursor-not-allowed opacity-75': disabled },
       { 'flex-row-reverse': reverse },
     ]"
     :disabled="disabled"
@@ -50,6 +50,6 @@ withDefaults(
     color: "",
     disabled: false,
     reverse: false,
-  }
+  },
 )
 </script>

src/components/smart/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex items-center justify-center transition cursor-pointer flex-nowrap group hover:text-secondaryDark"
+    class="inline-flex items-center justify-center cursor-pointer group flex-nowrap transition hover:text-secondaryDark"
     role="checkbox"
     :aria-checked="on"
     @click="emit('change')"

src/components/smart/Expand.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex flex-col space-y-2 overflow-hidden"
+    class="relative flex flex-col overflow-hidden space-y-2"
     :class="expand ? 'h-full' : 'max-h-32'"
   >
     <slot name="body"></slot>
@@ -41,6 +41,6 @@ withDefaults(
   {
     less: "Less",
     more: "More",
-  }
+  },
 )
 </script>

src/components/smart/FileChip.vue

@@ -1,9 +1,9 @@
 <template>
   <span
-    class="inline-flex items-center space-x-1 justify-center rounded px-2 bg-primaryDark"
+    class="inline-flex items-center justify-center px-2 rounded space-x-1 bg-primaryDark"
   >
     <IconLucideFile class="opacity-75 svg-icons" />
-    <span class="truncate max-w-[16rem]"><slot></slot></span>
+    <span class="max-w-[16rem] truncate"><slot></slot></span>
   </span>
 </template>
 

src/components/smart/Modal.vue

@@ -31,23 +31,23 @@
         >
         <Transition name="bounce" appear>
           <div
-            class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle"
+            class="inline-block w-full overflow-hidden text-left align-bottom shadow-lg transform border-dividerDark bg-primary transition-all sm:rounded-xl sm:border sm:align-middle"
             :class="[{ 'mt-16 md:mb-8': placement === 'top' }, styles]"
           >
             <div
               v-if="title"
               class="flex items-center justify-between border-b border-dividerLight"
               :class="{ 'p-4': !fullWidth }"
             >
-              <div class="flex items-center flex-1 justify-start">
+              <div class="flex items-center justify-start flex-1">
                 <slot name="actions"></slot>
               </div>
               <div class="flex items-center justify-center">
                 <h3 class="heading">
                   {{ title }}
                 </h3>
               </div>
-              <div class="flex items-center flex-1 justify-end">
+              <div class="flex items-center justify-end flex-1">
                 <HoppButtonSecondary
                   v-if="dimissible"
                   v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -58,14 +58,14 @@
               </div>
             </div>
             <div
-              class="flex flex-col overflow-y-auto max-h-[55vh]"
+              class="flex max-h-[55vh] flex-col overflow-y-auto"
               :class="{ 'p-4': !fullWidth && !fullWidthBody }"
             >
               <slot name="body"></slot>
             </div>
             <div
               v-if="hasFooterSlot"
-              class="flex flex-1 items-center justify-between border-t border-dividerLight bg-primaryContrast"
+              class="flex items-center justify-between flex-1 border-t border-dividerLight bg-primaryContrast"
               :class="{ 'p-4': !fullWidth }"
             >
               <slot name="footer"></slot>
@@ -130,7 +130,7 @@ withDefaults(
     fullWidthBody: false,
     styles: "sm:max-w-lg",
     closeText: null,
-  }
+  },
 )
 
 const emit = defineEmits<{

src/components/smart/Picture.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     tabindex="0"
-    class="relative rounded-full flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    class="relative flex items-center justify-center rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
   >
     <Avatar
       :size="size"
@@ -12,7 +12,7 @@
     />
     <span
       v-if="indicator"
-      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full border-2 border-primary"
       :class="indicatorStyles"
     ></span>
   </div>
@@ -33,6 +33,6 @@ withDefaults(
     indicator: false,
     indicatorStyles: "bg-green-500",
     size: 22,
-  }
+  },
 )
 </script>

src/components/smart/Placeholder.vue

@@ -5,16 +5,16 @@
       :src="src"
       loading="lazy"
       class="inline-flex flex-col object-contain object-center"
-      :class="large ? 'w-32 h-32' : 'w-16 h-16'"
+      :class="large ? 'h-32 w-32' : 'h-16 w-16'"
       :alt="alt"
     />
     <slot name="icon"></slot>
-    <span v-if="heading" class="font-semibold mt-2 text-center">
+    <span v-if="heading" class="mt-2 font-semibold text-center">
       {{ heading }}
     </span>
     <span
       v-if="text"
-      class="max-w-sm mt-2 text-center whitespace-normal text-secondaryLight text-tiny"
+      class="max-w-sm mt-2 text-center whitespace-normal text-tiny text-secondaryLight"
     >
       {{ text }}
     </span>
@@ -38,7 +38,7 @@ withDefaults(
   {
     alt: "",
     text: "",
-  }
+  },
 )
 
 const slots = useSlots()

src/components/smart/SelectWrapper.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="select-wrapper">
-    <span class="down-icon text-xs">
+    <span class="text-xs down-icon">
       <IconChevronDown />
     </span>
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
-import IconChevronDown from '~icons/lucide/chevron-down'
+import IconChevronDown from "~icons/lucide/chevron-down"
 </script>
 
 <style scoped lang="scss">

src/components/smart/Tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="shouldRender" v-show="active" class="flex flex-1 flex-col">
+  <div v-if="shouldRender" v-show="active" class="flex flex-col flex-1">
     <slot></slot>
   </div>
 </template>
@@ -30,7 +30,7 @@ const props = withDefaults(
     indicator: false,
     info: null,
     disabled: false,
-  }
+  },
 )
 
 const tabMeta = computed<TabMeta>(() => ({

src/components/smart/Table.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
+  <div class="overflow-auto border shadow-md rounded-md border-dividerDark">
     <table class="w-full">
       <thead>
         <slot name="head">
           <tr
-            class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
+            class="text-sm text-left border-b border-dividerDark bg-primaryLight text-secondary"
           >
             <th v-for="th in headings" scope="col" class="px-6 py-3">
               {{ th.label ?? th.key }}
@@ -19,14 +19,14 @@
           <tr
             v-for="(rowData, rowIndex) in list"
             :key="rowIndex"
-            class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+            class="rounded-xl text-secondaryDark hover:cursor-pointer hover:bg-divider"
             :class="{ 'divide-x divide-divider': showYBorder }"
           >
             <td
               v-for="cellHeading in headings"
               :key="cellHeading.key"
               @click="!cellHeading.preventClick && onRowClicked(rowData)"
-              class="max-w-[10rem] pl-6 py-1"
+              class="max-w-[10rem] py-1 pl-6"
             >
               <!-- Dynamic column slot -->
               <slot :name="cellHeading.key" :item="rowData">

src/components/smart/Tabs.vue

@@ -1,15 +1,15 @@
 <template>
   <div
-    class="flex h-full flex-1 flex-nowrap"
+    class="flex flex-1 h-full flex-nowrap"
     :class="{ '!h-auto !flex-col': !vertical }"
   >
     <div
-      class="tabs relative border-dividerLight"
+      class="relative tabs border-dividerLight"
       :class="[vertical ? 'border-r' : 'border-b', styles]"
     >
       <div class="flex flex-1">
         <div
-          class="flex flex-1 justify-between"
+          class="flex justify-between flex-1"
           :class="{ 'flex-col': vertical }"
         >
           <div class="flex" :class="{ 'flex-col space-y-2 p-2': vertical }">
@@ -48,7 +48,7 @@
               </span>
               <span
                 v-if="tabMeta.indicator"
-                class="ml-2 h-1 w-1 rounded-full bg-accentLight"
+                class="w-1 h-1 ml-2 rounded-full bg-accentLight"
               ></span>
             </button>
           </div>
@@ -59,7 +59,7 @@
       </div>
     </div>
     <div
-      class="contents h-full w-full"
+      class="w-full h-full contents"
       :class="[
         {
           '!flex flex-1 flex-col overflow-y-auto': vertical,
@@ -136,7 +136,7 @@ const addTabEntry = (tabID: string, meta: TabMeta) => {
     tabEntries.value,
     O.fromPredicate(not(A.exists(([id]) => id === tabID))),
     O.map(A.append([tabID, meta] as [string, TabMeta])),
-    O.getOrElseW(() => throwError(`Tab with duplicate ID created: '${tabID}'`))
+    O.getOrElseW(() => throwError(`Tab with duplicate ID created: '${tabID}'`)),
   )
 }
 
@@ -147,10 +147,10 @@ const updateTabEntry = (tabID: string, newMeta: TabMeta) => {
     O.chain((index) =>
       pipe(
         tabEntries.value,
-        A.updateAt(index, [tabID, newMeta] as [string, TabMeta])
-      )
+        A.updateAt(index, [tabID, newMeta] as [string, TabMeta]),
+      ),
     ),
-    O.getOrElseW(() => throwError(`Failed to update tab entry: ${tabID}`))
+    O.getOrElseW(() => throwError(`Failed to update tab entry: ${tabID}`)),
   )
 }
 
@@ -159,7 +159,7 @@ const removeTabEntry = (tabID: string) => {
     tabEntries.value,
     A.findIndex(([id]) => id === tabID),
     O.chain((index) => pipe(tabEntries.value, A.deleteAt(index))),
-    O.getOrElseW(() => throwError(`Failed to remove tab entry: ${tabID}`))
+    O.getOrElseW(() => throwError(`Failed to remove tab entry: ${tabID}`)),
   )
 
   // If we tried to remove the active tabEntries, switch to first tab entry

src/components/smart/TreeBranch.vue

@@ -20,7 +20,7 @@
     ></div>
     <div
       v-if="childNodes.status === 'loaded' && childNodes.data.length > 0"
-      class="flex flex-1 flex-col truncate"
+      class="flex flex-col flex-1 truncate"
       :class="{
         'bg-divider': highlightNode,
       }"
@@ -58,14 +58,14 @@
 
     <div
       v-if="childNodes.status === 'loading'"
-      class="flex flex-1 flex-col items-center justify-center p-4"
+      class="flex flex-col items-center justify-center flex-1 p-4"
     >
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t?.("state.loading") }}</span>
     </div>
     <div
       v-if="childNodes.status === 'loaded' && childNodes.data.length === 0"
-      class="flex flex-1 flex-col"
+      class="flex flex-col flex-1"
     >
       <slot name="emptyNode" :node="nodeItem"></slot>
     </div>
@@ -115,7 +115,7 @@ const highlightNode = ref(false)
  * Fetch the child nodes from the adapter by passing the node id of the current node
  */
 const childNodes = computed(
-  () => props.adapter.getChildren(props.nodeItem.id).value
+  () => props.adapter.getChildren(props.nodeItem.id).value,
 )
 
 const toggleNodeChildren = () => {