style(linting): Fix Lint errors

sfxcode · sfxcode · commit 5f0fcf05f54c · 2025-05-25T09:11:32.000+02:00
diff --git a/src/components/AdvertiseBox.vue b/src/components/AdvertiseBox.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <div class="">
-    <span class="shadow-2 mb-1 inline-block p-3" style="border-radius: 10px">
+    <span class="shadow-2 mb-1 p-3 inline-block" style="border-radius: 10px">
       <div :class="`i-mdi-check text-4xl text-${color}`" />
     </span>
     <div :class="`mb-3 text-2xl text-${color}`">
diff --git a/src/components/app/AppColorMode.vue b/src/components/app/AppColorMode.vue
@@ -21,11 +21,11 @@ watchEffect(() => mode.value = state.value)
   <div>
     <client-only>
       <Button @click="next()">
-        <i v-if="mode === 'dark'" i-carbon-moon inline-block align-middle class="align-middle" />
-        <i v-if="mode === 'light'" i-carbon-sun inline-block align-middle class="align-middle" />
-        <i v-if="mode === 'cafe'" i-carbon-cafe inline-block align-middle class="align-middle" />
-        <i v-if="mode === 'contrast'" i-carbon-contrast inline-block align-middle class="align-middle" />
-        <i v-if="mode === 'auto'" i-carbon-laptop inline-block align-middle class="align-middle" />
+        <i v-if="mode === 'dark'" i-carbon-moon align-middle inline-block class="align-middle" />
+        <i v-if="mode === 'light'" i-carbon-sun align-middle inline-block class="align-middle" />
+        <i v-if="mode === 'cafe'" i-carbon-cafe align-middle inline-block class="align-middle" />
+        <i v-if="mode === 'contrast'" i-carbon-contrast align-middle inline-block class="align-middle" />
+        <i v-if="mode === 'auto'" i-carbon-laptop align-middle inline-block class="align-middle" />
         <span class="ml-2 capitalize">{{ mode }}</span>
       </Button>
     </client-only>
diff --git a/src/components/app/AppFooter.vue b/src/components/app/AppFooter.vue
@@ -4,7 +4,7 @@ const version = ref(import.meta.env.VITE_APP_VERSION)
 
 <template>
   <div class="layout-footer mt-4">
-    <span class="ml-2 font-medium">Vite PrimeVue Starter - {{ version }}</span>
+    <span class="font-medium ml-2">Vite PrimeVue Starter - {{ version }}</span>
   </div>
 </template>
 
diff --git a/src/components/app/AppSidebar.vue b/src/components/app/AppSidebar.vue
@@ -51,7 +51,7 @@ onMounted(() => {
         </div>
       </template>
       <template #footer>
-        <div class="m-2 text-center text-xs text-color-primary">
+        <div class="text-xs text-color-primary m-2 text-center">
           <span v-if="!stateStore.collapsed">PrimeVue Vite Starter {{ version }}</span>
           <span v-if="stateStore.collapsed">{{ version }}</span>
         </div>
diff --git a/src/composables/confirmation.ts b/src/composables/confirmation.ts
@@ -1,5 +1,5 @@
-import { useMessages } from '@/composables/messages'
 import { useConfirm } from 'primevue/useconfirm'
+import { useMessages } from '@/composables/messages'
 
 export function useConfirmation() {
   const confirm = useConfirm()
diff --git a/src/layouts/404.vue b/src/layouts/404.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="px-4 py-10 text-center text-8xl text-teal-700">
+  <main class="text-8xl text-teal-700 px-4 py-10 text-center">
     <div>
       <p class="text-8xl text-red-600">
         <i-codicon-error class="inline-block" />
diff --git a/src/layouts/error.vue b/src/layouts/error.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <main class="px-4 py-10 text-center text-6xl text-red-600">
+  <main class="text-6xl text-red-600 px-4 py-10 text-center">
     <router-view />
   </main>
   <AppFooter />
diff --git a/src/modules/pinia.ts b/src/modules/pinia.ts
@@ -1,6 +1,6 @@
 import type { UserModule } from '@/types'
-import { useAuthStore } from '@/store'
 import { createPinia } from 'pinia'
+import { useAuthStore } from '@/store'
 
 // Setup Pinia
 // https://pinia.esm.dev/
diff --git a/src/pages/admin/index.vue b/src/pages/admin/index.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { useAuthStore } from '@/store'
 import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/store'
 
 const auth = useAuthStore()
 const router = useRouter()
@@ -12,7 +12,7 @@ function logout() {
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center px-4 py-12 lg:px-8 sm:px-6">
+  <div class="px-4 py-12 flex min-h-screen items-center justify-center lg:px-8 sm:px-6">
     <div class="max-w-md w-full space-y-8">
       <h5>Restricted Admin Area</h5>
       <p>Some restricted content ....</p>
diff --git a/src/pages/data/stores.vue b/src/pages/data/stores.vue
@@ -13,26 +13,26 @@ onMounted(async () => {
 <template>
   <div class="card">
     <h2>Store Settings</h2>
-    <h5 class="mb-4 text-2xl font-bold">
+    <h5 class="text-2xl font-bold mb-4">
       Primevue Theme Store
     </h5>
-    <div class="grid grid-cols-2 gap-4">
+    <div class="gap-4 grid grid-cols-2">
       <div>Theme Name</div>
       <div>{{ themeStore.themeName }}</div>
       <div>Theme Color</div>
       <div>{{ themeStore.themeColor }}</div>
     </div>
 
-    <h5 class="mb-4 text-2xl font-bold">
+    <h5 class="text-2xl font-bold mb-4">
       Data Store (Option Store)
     </h5>
     <span class="text-xs">Example of a Data Store</span>
-    <div class="grid grid-cols-2 mt-6 gap-4">
+    <div class="mt-6 gap-4 grid grid-cols-2">
       <div>Products</div>
       <div>{{ dataStore.products.length }}</div>
     </div>
 
-    <h5 class="mb-4 text-2xl font-bold">
+    <h5 class="text-2xl font-bold mb-4">
       Counter Store (Setup Store)
     </h5>
     <span class="text-xs">Example of a Data Store</span>
diff --git a/src/pages/form/index.vue b/src/pages/form/index.vue
@@ -139,7 +139,7 @@ async function submitHandler() {
     </div>
     <div class="basis-1/2 md:basis-1/3">
       <h2>Formkit-PrimeVue</h2>
-      <div class="mt-12 text-xl">
+      <div class="text-xl mt-12">
         <h4>GitHub</h4>
         <a href="https://github.com/sfxcode/formkit-primevue">formkit-primevue</a>
         <h4>More examples</h4>
diff --git a/src/pages/form/toggle.vue b/src/pages/form/toggle.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useMessages } from '@/composables/messages'
 import { useFormKitSchema } from '@sfxcode/formkit-primevue/composables'
+import { useMessages } from '@/composables/messages'
 
 const { addElement } = useFormKitSchema()
 const { t } = useI18n()
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -4,15 +4,15 @@ import AdvertiseBox from '@/components/AdvertiseBox.vue'
 
 <template>
   <div class="surface-0 text-center">
-    <div class="mb-3 text-4xl font-bold">
+    <div class="text-4xl font-bold mb-3">
       <span class="text-green-600">PrimeVue </span>
       <span class="text-blue-400"> & TypeScript</span>
       <span class="text-blue-600"> & Vite</span>
     </div>
-    <h2 class="pb-6 text-2xl">
+    <h2 class="text-2xl pb-6">
       Starter for Vue.js Development.
     </h2>
-    <div class="grid grid-cols-3 gap-4">
+    <div class="gap-4 grid grid-cols-3">
       <AdvertiseBox header="VUE 3.4" icon="pi-check-circle" color="green-600">
         Composition Api
       </AdvertiseBox>
diff --git a/src/pages/login.vue b/src/pages/login.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { useAuthStore } from '@/store'
 import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/store'
 
 const auth = useAuthStore()
 
@@ -45,7 +45,7 @@ function actionLogin() {
 </script>
 
 <template>
-  <div class="mx-auto flex flex-col items-center justify-center px-6 py-8 op80 md:h-screen">
+  <div class="mx-auto px-6 py-8 op80 flex flex-col items-center justify-center md:h-screen">
     <div class="card md:1/2 w-100 md:ml-80">
       <div class="flex justify-center">
         <img class="mt-4 w-8/12" src="/vue-logo.png" alt="Logo">
@@ -60,7 +60,7 @@ function actionLogin() {
       >
         <FormKitSchema :schema="schema" :data="data" />
       </FormKit>
-      <div v-if="errorMessage.length > 0" class="p-error m-4 mt-2 text-2xl font-medium">
+      <div v-if="errorMessage.length > 0" class="p-error text-2xl font-medium m-4 mt-2">
         {{ errorMessage }}
       </div>
     </div>
diff --git a/src/pages/prime/datatable.vue b/src/pages/prime/datatable.vue
@@ -1,7 +1,7 @@
 <script setup lang='ts'>
+import { FilterMatchMode } from '@primevue/core/api'
 import { usePrimeDataTable } from '@/composables/primeDataTable'
 import { useDataStore } from '@/store'
-import { FilterMatchMode } from '@primevue/core/api'
 
 const { tableData, filters, dataTableRef, exportCSV } = usePrimeDataTable()
 
diff --git a/src/pages/store/Store.vue b/src/pages/store/Store.vue
@@ -9,26 +9,26 @@ const counterStore = useCounterStore()
 <template>
   <div class="card">
     <h5>Store Settings</h5>
-    <h5 class="mb-4 text-2xl font-bold">
+    <h5 class="text-2xl font-bold mb-4">
       Primevue Theme Store
     </h5>
-    <div class="grid grid-cols-2 gap-4">
+    <div class="gap-4 grid grid-cols-2">
       <div>Theme Name</div>
       <div>{{ themeStore.themeName }}</div>
       <div>Theme Color</div>
       <div>{{ themeStore.themeColor }}</div>
     </div>
 
-    <h5 class="mb-4 text-2xl font-bold">
+    <h5 class="text-2xl font-bold mb-4">
       Data Store (Option Store)
     </h5>
     <span class="text-xs">Example of a Data Store</span>
-    <div class="grid grid-cols-2 mt-6 gap-4">
+    <div class="mt-6 gap-4 grid grid-cols-2">
       <div>Products</div>
       <div>{{ dataStore.products.length }}</div>
     </div>
 
-    <h5 class="mb-4 text-2xl font-bold">
+    <h5 class="text-2xl font-bold mb-4">
       Counter Store (Setup Store)
     </h5>
     <span class="text-xs">Example of a Data Store</span>
diff --git a/src/pages/ui/icons.vue b/src/pages/ui/icons.vue
@@ -7,19 +7,19 @@
     <h2>Icons by UnoCSS</h2>
     <div class="i-logos-vue text-6xl" />
     <h3>Iconset: MDI</h3>
-    <div class="grid grid-cols-3 mt-6">
+    <div class="mt-6 grid grid-cols-3">
       <div class="text-green-600-500-500 i-mdi-information text-4xl" />
       <div class="i-mdi-alarm text-4xl text-blue-500" />
       <div class="i-mdi-github-circle text-4xl text-purple-500" />
     </div>
     <h3>Iconset: TWEMOJI</h3>
-    <div class="grid grid-cols-3 mt-6">
+    <div class="mt-6 grid grid-cols-3">
       <div class="i-twemoji-1st-place-medal text-4xl" />
       <div class="i-twemoji-2nd-place-medal text-4xl" />
       <div class="i-twemoji-3rd-place-medal text-4xl" />
     </div>
     <h3>Iconset: Prime</h3>
-    <div class="grid grid-cols-3 mt-6">
+    <div class="mt-6 grid grid-cols-3">
       <div class="i-prime-home text-4xl" />
       <div class="i-prime-comments text-4xl text-green-400" />
       <div class="i-prime-check-circle" />
diff --git a/src/pages/ui/uno.vue b/src/pages/ui/uno.vue
@@ -5,15 +5,15 @@ const isDevelopmentMode = process.env.NODE_ENV?.indexOf('dev') !== -1
 <template>
   <div class="card">
     <h5>UnoCSS</h5>
-    <div h-full flex select-none text-center all:transition-400>
+    <div text-center flex h-full select-none all:transition-400>
       <div ma>
-        <div animate-5s animate-bounce-alt animate-count-infinite text-5xl fw100>
+        <div animate-5s text-5xl fw100 animate-bounce-alt animate-count-infinite>
           unocss
         </div>
-        <div m1 text-lg fw300 op30>
+        <div text-lg fw300 m1 op30>
           The instant on-demand Atomic CSS engine.
         </div>
-        <div m2 flex justify-center text-2xl op30 hover="op80">
+        <div text-2xl m2 op30 flex justify-center hover="op80">
           <a
             i-mdi-github-circle
             text-inherit
@@ -23,7 +23,7 @@ const isDevelopmentMode = process.env.NODE_ENV?.indexOf('dev') !== -1
         </div>
       </div>
     </div>
-    <div bottom-5 left-0 right-0 text-center fw300 op30>
+    <div fw300 text-center op30 bottom-5 left-0 right-0>
       on-demand · instant · fully customizable
     </div>
 
@@ -37,7 +37,7 @@ const isDevelopmentMode = process.env.NODE_ENV?.indexOf('dev') !== -1
       <a href="../__unocss" target="_blank">
         <div class="i-mdi-information text-green-600-500-500 text-4xl" />
       </a>
-      <article class="pt-4 text-base prose prose-truegray xl:text-xl">
+      <article class="prose-truegray text-base pt-4 prose xl:text-xl">
         View, play and analyse rules and setup ...
       </article>
     </div>
