style(format & lint): format & lint codebase

BayBreezy · Aug 18, 2024 · cd3a058 · cd3a058
1 parent 7a189a8
commit cd3a058
Show file tree

Hide file tree

Showing 19 changed files with 167 additions and 143 deletions.
diff --git a/components/Ui/Command/Input.vue b/components/Ui/Command/Input.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div class="flex items-center border-b px-3">
     <Icon :name="icon || 'lucide:search'" class="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="$attrs"

diff --git a/components/Ui/CurrencyInput.vue b/components/Ui/CurrencyInput.vue
@@ -1,5 +1,6 @@
 <template>
-  <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" >
+  <!-- eslint-disable-next-line vue/html-self-closing -->
+  <input ref="inputRef" type="text" :class="styles({ class: props.class })" v-bind="props" />
 </template>
 
 <script lang="ts" setup>

diff --git a/components/Ui/Input.vue b/components/Ui/Input.vue
@@ -1,5 +1,6 @@
 <template>
-  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" >
+  <!-- eslint-disable-next-line vue/html-self-closing -->
+  <input v-bind="props" v-model="localModel" :class="styles({ class: props.class })" />
 </template>
 
 <script lang="ts" setup>

diff --git a/components/content/Block/Error/BlockErrorImage.vue b/components/content/Block/Error/BlockErrorImage.vue
@@ -8,11 +8,12 @@
       </div>
     </div>
     <div class="hidden h-screen md:block md:w-1/2 lg:w-1/2">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         src="https://images.unsplash.com/photo-1512551980832-13df02babc9e?q=60&w=2864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
         alt="Login form image"
         class="size-full object-cover"
-      >
+      />
     </div>
   </div>
 </template>

diff --git a/components/content/Block/Hero/BlockHero1.vue b/components/content/Block/Hero/BlockHero1.vue
@@ -31,6 +31,7 @@
       </div>
     </div>
     <div class="h-[350px] md:h-full md:w-1/3 xl:w-1/2">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full object-cover"
         src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -39,7 +40,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section one header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>

diff --git a/components/content/Block/Hero/BlockHero2.vue b/components/content/Block/Hero/BlockHero2.vue
@@ -25,6 +25,7 @@
       </div>
     </div>
     <div class="h-[350px] md:h-full md:w-1/3 xl:w-1/2">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full object-cover lg:[clip-path:polygon(15%_0,100%_0,100%_100%,0_100%)]"
         src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -33,7 +34,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section two header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>

diff --git a/components/content/Block/Hero/BlockHero3.vue b/components/content/Block/Hero/BlockHero3.vue
@@ -51,6 +51,7 @@
       </div>
     </div>
     <div class="h-[350px] md:h-full md:w-1/3 xl:w-1/2">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full rounded-tl-[60px] object-cover lg:rounded-tl-[160px]"
         src="https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -59,7 +60,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section three header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>

diff --git a/components/content/Block/Hero/BlockHero4.vue b/components/content/Block/Hero/BlockHero4.vue
@@ -8,6 +8,7 @@
     <div
       class="absolute inset-y-0 right-5 -z-[1] hidden h-full md:block md:w-[400px] lg:w-[700px] xl:w-[800px]"
     >
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full object-cover shadow lg:rounded-bl-[150px] lg:rounded-tr-[150px]"
         src="https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -16,7 +17,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section one header`"
-      >
+      />
     </div>
     <div class="flex h-full items-center justify-center lg:w-[768px]">
       <div>
@@ -37,6 +38,7 @@
       </div>
     </div>
     <div class="h-[300px] md:hidden">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full rounded-bl-[40px] rounded-tr-[40px] object-cover"
         src="https://images.unsplash.com/photo-1597773150796-e5c14ebecbf5?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -45,7 +47,7 @@
         width="700"
         height="300"
         :title="`${COMPANY_NAME} hero section four header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>

diff --git a/components/content/Block/Hero/BlockHero5.vue b/components/content/Block/Hero/BlockHero5.vue
@@ -8,6 +8,7 @@
     <div
       class="absolute inset-y-0 right-5 -z-[1] hidden h-full md:block md:w-[450px] lg:w-[700px] xl:w-[800px]"
     >
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full rounded-lg object-cover shadow"
         src="https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -16,7 +17,7 @@
         width="700"
         height="800"
         :title="`${COMPANY_NAME} hero section one header`"
-      >
+      />
     </div>
     <div class="flex h-full items-center justify-center md:w-[550px] lg:w-[768px]">
       <div>
@@ -71,6 +72,7 @@
       </div>
     </div>
     <div class="h-[300px] md:hidden">
+      <!-- eslint-disable-next-line vue/html-self-closing -->
       <img
         class="h-full w-full rounded-bl-[70px] rounded-tr-[70px] object-cover"
         src="https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -79,7 +81,7 @@
         width="700"
         height="300"
         :title="`${COMPANY_NAME} hero section four header`"
-      >
+      />
     </div>
   </UiContainer>
 </template>

diff --git a/components/content/Block/Hero/BlockHero6.vue b/components/content/Block/Hero/BlockHero6.vue
@@ -18,7 +18,8 @@
     <div class="flex h-full items-center justify-center text-center md:w-1/2 md:text-left">
       <div>
         <h1 class="mb-4 text-4xl font-bold md:text-5xl lg:mb-6 lg:mt-5 xl:text-6xl">
-          Super simplified <br >
+          <!-- eslint-disable-next-line vue/html-self-closing -->
+          Super simplified <br />
           customer service
         </h1>
         <p class="text-lg text-muted-foreground lg:text-xl">
@@ -53,13 +54,14 @@
       <div
         class="w-full rounded-md bg-muted/50 px-4 py-10 ring-1 ring-muted/30 dark:bg-muted/5 md:px-10 lg:w-[440px] lg:px-10"
       >
+        <!-- eslint-disable-next-line vue/html-self-closing -->
         <img
           src="/icon.png"
           fit="contain"
           alt="Company Logo"
           title="Company Logo"
           class="mx-auto h-11 object-contain"
-        >
+        />
         <h2 class="text-center text-2xl font-semibold lg:mt-6 lg:text-3xl">Create an account</h2>
         <p class="mt-3 text-center text-muted-foreground">Get started with {{ COMPANY_NAME }}</p>
 

diff --git a/components/content/Block/Hero/BlockHero7.vue b/components/content/Block/Hero/BlockHero7.vue
@@ -8,7 +8,8 @@
     </div>
 
     <h1 class="mb-4 mt-7 text-4xl font-bold lg:mb-6 lg:mt-5 lg:text-center lg:text-5xl xl:text-6xl">
-      High-performing remote teams.<br >The future of work.
+      <!-- eslint-disable-next-line vue/html-self-closing -->
+      High-performing remote teams.<br />The future of work.
     </h1>
     <p class="mx-auto max-w-[760px] text-lg text-muted-foreground lg:text-center lg:text-xl">
       Powerful, self-serve team engagement tools and analytics. Supercharge your managers & keep

diff --git a/components/content/Block/Navigation/BlockNavigation1.vue b/components/content/Block/Navigation/BlockNavigation1.vue
@@ -3,13 +3,14 @@
     <UiContainer class="flex h-16 items-center justify-between lg:h-20">
       <div class="flex items-center gap-10">
         <NuxtLink to="#" class="flex items-center gap-3">
+          <!-- eslint-disable-next-line vue/html-self-closing -->
           <img
             src="/icon.png"
             fit="contain"
             alt="Company Logo"
             title="Company Logo"
             class="h-6 object-contain lg:h-8"
-          >
+          />
           <span class="font-semibold lg:text-lg">UI Thing</span>
         </NuxtLink>
         <UiNavigationMenu as="nav" class="hidden items-center justify-start gap-8 lg:flex">

diff --git a/components/content/Block/Navigation/BlockNavigation2.vue b/components/content/Block/Navigation/BlockNavigation2.vue
@@ -3,13 +3,14 @@
     <UiContainer class="flex h-16 items-center justify-between lg:h-20">
       <div class="flex items-center gap-10">
         <NuxtLink to="#" class="flex items-center gap-3">
+          <!-- eslint-disable-next-line vue/html-self-closing -->
           <img
             src="/icon.png"
             fit="contain"
             alt="Company Logo"
             title="Company Logo"
             class="h-6 object-contain lg:h-8"
-          >
+          />
           <span class="font-semibold lg:text-lg">UI Thing</span>
         </NuxtLink>
         <UiNavigationMenu as="nav" class="hidden items-center justify-start gap-8 lg:flex">

diff --git a/components/content/Block/Navigation/BlockNavigation3.vue b/components/content/Block/Navigation/BlockNavigation3.vue
@@ -3,13 +3,14 @@
     <UiContainer class="flex h-16 items-center justify-between lg:h-20">
       <div class="flex items-center gap-10">
         <NuxtLink to="#" class="flex items-center gap-3">
+          <!-- eslint-disable-next-line vue/html-self-closing -->
           <img
             src="/icon.png"
             fit="contain"
             alt="Company Logo"
             title="Company Logo"
             class="h-6 object-contain lg:h-8"
-          >
+          />
           <span class="font-semibold lg:text-lg">UI Thing</span>
         </NuxtLink>
         <UiNavigationMenu as="nav" class="hidden items-center justify-start gap-8 lg:flex">
@@ -31,14 +32,15 @@
                           class="group flex gap-4 rounded-md p-3 transition hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 dark:hover:bg-muted/20"
                         >
                           <div class="h-[80px] w-[800px] overflow-hidden rounded-lg shadow-sm">
+                            <!-- eslint-disable-next-line vue/html-self-closing -->
                             <img
                               loading="lazy"
                               :src="`http://unsplash.it/400/90?random=${b}&gravity=center.webp`"
                               alt="Random blog image"
                               width="400"
                               height="90"
                               class="h-full w-[400px] object-cover transition hover:scale-110 group-hover:scale-110"
-                            >
+                            />
                           </div>
                           <div class="flex flex-col gap-1.5 leading-none">
                             <p class="text-sm font-semibold">Auto layout explained</p>
@@ -108,14 +110,15 @@
                                 class="flex flex-col gap-5 rounded-md transition hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 dark:hover:bg-muted/20"
                               >
                                 <div class="h-[200px] w-full overflow-hidden rounded-lg shadow-sm">
+                                  <!-- eslint-disable-next-line vue/html-self-closing -->
                                   <img
                                     :src="`http://unsplash.it/400/210?random=${b}&gravity=center.webp`"
                                     alt="Random blog image"
                                     width="400"
                                     loading="lazy"
                                     height="200"
                                     class="h-full w-full object-cover transition hover:scale-110 group-hover:scale-110"
-                                  >
+                                  />
                                 </div>
                                 <div class="flex flex-col gap-1.5 leading-none">
                                   <p class="line-clamp-1 overflow-ellipsis font-semibold">

diff --git a/components/content/Docs/AspectRatio/DocsAspectRatio.vue b/components/content/Docs/AspectRatio/DocsAspectRatio.vue
@@ -3,11 +3,12 @@
     <UiAspectRatio :ratio="16 / 9">
       <UiContextMenu>
         <UiContextMenuTrigger as-child>
+          <!-- eslint-disable-next-line vue/html-self-closing -->
           <img
             src="https://cdn.pixabay.com/photo/2023/05/02/21/08/river-7966163_1280.png"
             alt="Snow Lake"
             class="h-full w-full rounded-md object-cover"
-          >
+          />
         </UiContextMenuTrigger>
         <UiContextMenuContent class="w-[150px]">
           <UiContextMenuGroup>

diff --git a/components/content/Docs/Drawer/DocsDrawerImage.vue b/components/content/Docs/Drawer/DocsDrawerImage.vue
@@ -16,11 +16,12 @@
             <UiAspectRatio :ratio="16 / 9" class="mt-6">
               <UiContextMenu>
                 <UiContextMenuTrigger as-child>
+                  <!-- eslint-disable-next-line vue/html-self-closing -->
                   <img
                     src="https://cdn.pixabay.com/photo/2023/05/02/21/08/river-7966163_1280.png"
                     alt="Snow Lake"
                     class="h-full w-full rounded-md object-cover"
-                  >
+                  />
                 </UiContextMenuTrigger>
                 <UiContextMenuContent class="w-[150px]">
                   <UiContextMenuGroup>

diff --git a/components/content/Docs/NavigationMenu/DocsNavigationMenu.vue b/components/content/Docs/NavigationMenu/DocsNavigationMenu.vue
@@ -6,11 +6,12 @@
           <UiNavigationMenuTrigger title="Beach day" />
           <UiNavigationMenuContent>
             <div class="grid w-[600px] grid-cols-2 gap-5 p-4">
+              <!-- eslint-disable-next-line vue/html-self-closing -->
               <img
                 src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
                 alt="Beach"
                 class="h-full w-full rounded-md object-cover"
-              >
+              />
               <ul class="flex flex-col gap-2">
                 <li
                   v-for="(item, i) in beachAmenities"
@@ -43,11 +44,12 @@
           <UiNavigationMenuTrigger title="Learn more" />
           <UiNavigationMenuContent>
             <div class="grid w-[500px] grid-cols-2 place-items-center gap-5 p-3">
+              <!-- eslint-disable-next-line vue/html-self-closing -->
               <img
                 src="https://www.radix-vue.com/logo.svg"
                 alt="Radix Vue Logo"
                 class="h-full w-full"
-              >
+              />
               <div>
                 <p class="text-lg font-semibold text-foreground">Radix Vue</p>
                 <p class="mt-2 text-muted-foreground">

diff --git a/components/content/Docs/NavigationMenu/DocsNavigationMenuVertical.vue b/components/content/Docs/NavigationMenu/DocsNavigationMenuVertical.vue
@@ -6,11 +6,12 @@
           <UiNavigationMenuTrigger class="w-full justify-between" title="Beach day" />
           <UiNavigationMenuContent>
             <div class="grid w-[300px] gap-5 p-4">
+              <!-- eslint-disable-next-line vue/html-self-closing -->
               <img
                 src="https://images.unsplash.com/photo-1510414842594-a61c69b5ae57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
                 alt="Beach"
                 class="h-[100px] w-full rounded-md object-cover"
-              >
+              />
               <ul class="flex flex-col gap-2">
                 <li
                   v-for="(item, i) in beachAmenities"
@@ -43,11 +44,12 @@
           <UiNavigationMenuTrigger class="w-full justify-between" title="Learn more" />
           <UiNavigationMenuContent>
             <div class="grid w-[300px] grid-cols-1 place-items-center gap-5 p-3">
+              <!-- eslint-disable-next-line vue/html-self-closing -->
               <img
                 src="https://www.radix-vue.com/logo.svg"
                 alt="Radix Vue Logo"
                 class="h-[100px] w-[100px] rounded-md object-cover"
-              >
+              />
               <div class="text-center">
                 <p class="text-lg font-semibold text-foreground">Radix Vue</p>
                 <p class="mt-2 text-muted-foreground">