refactor: remove HTML comments from all components and pages

FelipeO16 · FelipeO16 · commit 107333311b28 · 2025-08-03T17:55:30.000-03:00
diff --git a/docs/app/components/paper/PUTabs.vue b/docs/app/components/paper/PUTabs.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="tabs relative font-patrick">
-    <!-- Tabs Navigation -->
     <div class="tabs-nav relative">
       <div
         v-for="(tab, index) in tabs"
diff --git a/docs/app/components/paper/ShowButton.vue b/docs/app/components/paper/ShowButton.vue
@@ -26,7 +26,6 @@
     <CodeBlock v-if="type === 'all-variants'">
       <template #preview>
         <div class="flex flex-col gap-4">
-          <!-- Flavors -->
           <div class="flex gap-2">
             <PUButton flavor="normal">
               Normal
@@ -39,7 +38,6 @@
             </PUButton>
           </div>
 
-          <!-- Sizes -->
           <div class="flex gap-2 items-center">
             <PUButton size="small">
               Small
@@ -52,7 +50,6 @@
             </PUButton>
           </div>
 
-          <!-- Shapes -->
           <div class="flex gap-2">
             <PUButton shape="rounded">
               Rounded
diff --git a/docs/app/components/paper/ShowGrid.vue b/docs/app/components/paper/ShowGrid.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="grid-demo">
-    <CodeBlock v-if="type === 'basic'" :compare="false">
+    <CodeBlock
+      v-if="type === 'basic'"
+      :compare="false"
+    >
       <template #preview>
-        <PUGrid :cols="3" gap="medium">
+        <PUGrid
+          :cols="3"
+          gap="medium"
+        >
           <PUGridItem>
             Item 1
           </PUGridItem>
@@ -19,10 +25,19 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'responsive'" :compare="false">
+    <CodeBlock
+      v-if="type === 'responsive'"
+      :compare="false"
+    >
       <template #preview>
-        <PUGrid :responsive="true" gap="large">
-          <PUGridItem v-for="i in 4" :key="i">
+        <PUGrid
+          :responsive="true"
+          gap="large"
+        >
+          <PUGridItem
+            v-for="i in 4"
+            :key="i"
+          >
             Item {{ i }}
           </PUGridItem>
         </PUGrid>
@@ -32,9 +47,15 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'span'" :compare="false">
+    <CodeBlock
+      v-if="type === 'span'"
+      :compare="false"
+    >
       <template #preview>
-        <PUGrid :cols="4" gap="medium">
+        <PUGrid
+          :cols="4"
+          gap="medium"
+        >
           <PUGridItem :col-span="2">
             Large item (2 columns)
           </PUGridItem>
@@ -54,9 +75,17 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'alignment'" :compare="false">
+    <CodeBlock
+      v-if="type === 'alignment'"
+      :compare="false"
+    >
       <template #preview>
-        <PUGrid :cols="3" gap="medium" alignment="center" justify="space-between">
+        <PUGrid
+          :cols="3"
+          gap="medium"
+          alignment="center"
+          justify="space-between"
+        >
           <PUGridItem alignment="start">
             Top aligned
           </PUGridItem>
@@ -73,10 +102,20 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'complex'" :compare="false">
+    <CodeBlock
+      v-if="type === 'complex'"
+      :compare="false"
+    >
       <template #preview>
-        <PUGrid :cols="6" :rows="4" gap="large">
-          <PUGridItem :col-span="2" :row-span="2">
+        <PUGrid
+          :cols="6"
+          :rows="4"
+          gap="large"
+        >
+          <PUGridItem
+            :col-span="2"
+            :row-span="2"
+          >
             Header
           </PUGridItem>
           <PUGridItem :col-span="4">
@@ -101,9 +140,15 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'masonry'" :compare="false">
+    <CodeBlock
+      v-if="type === 'masonry'"
+      :compare="false"
+    >
       <template #preview>
-        <PUGrid cols="repeat(auto-fill, minmax(250px, 1fr))" gap="medium">
+        <PUGrid
+          cols="repeat(auto-fill, minmax(250px, 1fr))"
+          gap="medium"
+        >
           <PUGridItem
             v-for="i in 6"
             :key="i"
@@ -118,21 +163,42 @@
       </template>
     </CodeBlock>
 
-    <CodeBlock v-if="type === 'gaps'" :compare="false">
+    <CodeBlock
+      v-if="type === 'gaps'"
+      :compare="false"
+    >
       <template #preview>
         <div class="space-y-4">
-          <PUGrid :cols="4" gap="small">
-            <PUGridItem v-for="i in 4" :key="'small-' + i">
+          <PUGrid
+            :cols="4"
+            gap="small"
+          >
+            <PUGridItem
+              v-for="i in 4"
+              :key="'small-' + i"
+            >
               Item {{ i }}
             </PUGridItem>
           </PUGrid>
-          <PUGrid :cols="4" gap="medium">
-            <PUGridItem v-for="i in 4" :key="'medium-' + i">
+          <PUGrid
+            :cols="4"
+            gap="medium"
+          >
+            <PUGridItem
+              v-for="i in 4"
+              :key="'medium-' + i"
+            >
               Item {{ i }}
             </PUGridItem>
           </PUGrid>
-          <PUGrid :cols="4" gap="large">
-            <PUGridItem v-for="i in 4" :key="'large-' + i">
+          <PUGrid
+            :cols="4"
+            gap="large"
+          >
+            <PUGridItem
+              v-for="i in 4"
+              :key="'large-' + i"
+            >
               Item {{ i }}
             </PUGridItem>
           </PUGrid>
diff --git a/docs/app/components/paper/ShowLoading.vue b/docs/app/components/paper/ShowLoading.vue
@@ -35,10 +35,12 @@
       :compare="false"
     >
       <template #preview>
-        <PULoading
-          type="skeleton"
-          size="medium"
-        />
+        <div class="w-20 h-10">
+          <PULoading
+            type="skeleton"
+            size="medium"
+          />
+        </div>
       </template>
       <template #code>
         <slot name="code" />
diff --git a/docs/app/components/paper/ShowRadio.vue b/docs/app/components/paper/ShowRadio.vue
@@ -32,7 +32,6 @@
     <CodeBlock v-if="type === 'all-variants'">
       <template #preview>
         <div class="flex flex-col gap-4">
-          <!-- Flavors -->
           <div class="flex flex-col gap-2">
             <PURadio
               v-model="selectedValue"
@@ -54,7 +53,6 @@
             />
           </div>
 
-          <!-- Disabled State -->
           <div class="flex flex-col gap-2">
             <PURadio
               v-model="selectedValue"
diff --git a/docs/app/components/paper/ShowTooltip.vue b/docs/app/components/paper/ShowTooltip.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="pu-tooltip-demo font-patrick">
-    <!-- Top Variations -->
     <CodeBlock v-if="type === 'top'">
       <template #preview>
         <PUTooltip :positions="['top']">
@@ -34,7 +33,6 @@
       </template>
     </CodeBlock>
 
-    <!-- Bottom Variations -->
     <CodeBlock v-if="type === 'bottom'">
       <template #preview>
         <PUTooltip :positions="['bottom']">
@@ -68,7 +66,6 @@
       </template>
     </CodeBlock>
 
-    <!-- Left Variations -->
     <CodeBlock v-if="type === 'left'">
       <template #preview>
         <PUTooltip :positions="['left']">
@@ -102,7 +99,6 @@
       </template>
     </CodeBlock>
 
-    <!-- Right Variations -->
     <CodeBlock v-if="type === 'right'">
       <template #preview>
         <PUTooltip :positions="['right']">
diff --git a/docs/app/layouts/default.vue b/docs/app/layouts/default.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div
     class="main h-screen flex justify-center"
diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
 const route = useRoute()
 
diff --git a/docs/app/pages/docs/[...slug].vue b/docs/app/pages/docs/[...slug].vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
 const route = useRoute()
 
diff --git a/docs/app/pages/docs/components/[...slug].vue b/docs/app/pages/docs/components/[...slug].vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
 const route = useRoute()
 
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/runtime/components/PUAccordion.vue b/src/runtime/components/PUAccordion.vue
@@ -25,7 +25,6 @@
         />
       </div>
 
-      <!-- Content -->
       <transition name="accordion">
         <div
           v-if="isOpen(index)"
diff --git a/src/runtime/components/PUAudio.vue b/src/runtime/components/PUAudio.vue
@@ -72,8 +72,7 @@ watch(isMuted, (newVal) => {
       :src="src"
     />
 
-    <!-- Play/Pause -->
-    <button @click="togglePlay">
+          <button @click="togglePlay">
       <PUIcon
         :name="isPlaying ? 'pause' : 'play'"
         class="w-8 h-8 text-primary-light-500 dark:text-white"
diff --git a/src/runtime/components/PUCard.vue b/src/runtime/components/PUCard.vue
@@ -3,18 +3,25 @@
     class="pu-card font-patrick"
     :class="[cardClass, customClass]"
   >
-    <!-- Card Image -->
-    <div v-if="image" class="pu-card__image">
-      <img :src="image" :alt="imageAlt" class="w-full h-full object-cover" />
+    <div
+      v-if="image"
+      class="pu-card__image"
+    >
+      <img
+        :src="image"
+        :alt="imageAlt"
+        class="w-full h-full object-cover"
+      >
     </div>
 
-    <!-- Card Content -->
     <div class="pu-card__content">
       <slot />
     </div>
 
-    <!-- Card Actions -->
-    <div v-if="$slots.actions" class="pu-card__actions">
+    <div
+      v-if="$slots.actions"
+      class="pu-card__actions"
+    >
       <slot name="actions" />
     </div>
   </div>
diff --git a/src/runtime/components/PUProgress.vue b/src/runtime/components/PUProgress.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="flex justify-center items-center">
-    <!-- Modo Radial -->
     <svg
       v-if="mode === 'radial'"
       :width="sizeMap.radial"
diff --git a/src/runtime/components/PUTabs.vue b/src/runtime/components/PUTabs.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="tabs relative font-patrick">
-    <!-- Tabs Navigation -->
     <div class="tabs-nav relative">
       <div
         v-for="(tab, index) in tabs"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-<!-- eslint-disable vue/multi-word-component-names -->`
`2`	`1`	`<template>`
`3`	`2`	`<div`
`4`	`3`	`class="main h-screen flex justify-center"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-<!-- eslint-disable vue/multi-word-component-names -->`
`2`	`1`	`<script setup lang="ts">`
`3`	`2`	`const route = useRoute()`
`4`	`3`