refactor: clean up whitespace and improve formatting across multiple components for better code readability

Author: FelipeO16

src/runtime/components/PUAccordion.vue

@@ -93,7 +93,6 @@ const toggle = (index: number) => {
   @apply border-t border-primary-light-500/10 dark:border-white/50 my-2;
 }
 
-
 .accordion-enter-active,
 .accordion-leave-active {
   @apply transition-all duration-300;

src/runtime/components/PUConfetti.vue

@@ -198,7 +198,6 @@ onUnmounted(() => {
   @apply block;
 }
 
-
 .pu-confetti::before {
   content: '';
   @apply absolute inset-0 pointer-events-none;

src/runtime/components/PUCopyToClipboard.vue

@@ -123,7 +123,6 @@ const copyToClipboard = async () => {
   @apply text-sm text-gray-700 dark:text-primary-light-50 font-medium;
 }
 
-
 .pu-copy--small .pu-copy__button {
   @apply px-2 py-1.5;
 }
@@ -160,7 +159,6 @@ const copyToClipboard = async () => {
   @apply text-base;
 }
 
-
 .pu-copy--disabled .pu-copy__button {
   @apply opacity-50 cursor-not-allowed;
 }
@@ -172,7 +170,6 @@ const copyToClipboard = async () => {
     0 1px 2px rgba(28, 28, 28, 0.05);
 }
 
-
 .pu-copy__button::before {
   content: '';
   @apply absolute inset-0 rounded-lg pointer-events-none;
@@ -191,7 +188,6 @@ const copyToClipboard = async () => {
       transparent 70%);
 }
 
-
 .pu-copy--copied .pu-copy__icon {
   animation: copySuccess 0.3s ease-out;
 }
@@ -210,7 +206,6 @@ const copyToClipboard = async () => {
   }
 }
 
-
 .dark .pu-copy__button {
   box-shadow:
     0 2px 4px rgba(0, 0, 0, 0.2),
@@ -223,7 +218,6 @@ const copyToClipboard = async () => {
     0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-
 @media (max-width: 640px) {
   .pu-copy--large .pu-copy__button {
     @apply px-3 py-2;

src/runtime/components/PUCounter.vue

@@ -162,7 +162,6 @@ watch(() => props.modelValue, (newValue) => {
   @apply text-primary-light-500 dark:text-primary-light-50;
 }
 
-
 .pu-counter__button:disabled {
   @apply opacity-50 cursor-not-allowed;
 }
@@ -174,7 +173,6 @@ watch(() => props.modelValue, (newValue) => {
     0 1px 2px rgba(28, 28, 28, 0.05);
 }
 
-
 .pu-counter--small .pu-counter__value {
   @apply text-lg;
 }
@@ -223,7 +221,6 @@ watch(() => props.modelValue, (newValue) => {
   @apply w-5 h-5;
 }
 
-
 .pu-counter__button::before {
   content: '';
   @apply absolute inset-0 rounded-full pointer-events-none;
@@ -238,7 +235,6 @@ watch(() => props.modelValue, (newValue) => {
     radial-gradient(circle at 70% 70%, rgba(193, 193, 193, 0.05) 0%, transparent 50%);
 }
 
-
 .pu-counter__value {
   animation: counterUpdate 0.3s ease-out;
 }
@@ -254,7 +250,6 @@ watch(() => props.modelValue, (newValue) => {
   }
 }
 
-
 .dark .pu-counter__value {
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
@@ -271,7 +266,6 @@ watch(() => props.modelValue, (newValue) => {
     0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-
 @media (max-width: 640px) {
   .pu-counter--large .pu-counter__value {
     @apply text-2xl;

src/runtime/components/PUDivider.vue

@@ -59,7 +59,6 @@ const dividerClass = computed(() => {
   @apply relative flex items-center;
 }
 
-
 .pu-divider--horizontal {
   @apply w-full my-4;
 }
@@ -76,7 +75,6 @@ const dividerClass = computed(() => {
     );
 }
 
-
 .pu-divider--vertical {
   @apply h-full mx-4 w-px;
 }
@@ -93,7 +91,6 @@ const dividerClass = computed(() => {
     );
 }
 
-
 .pu-divider--solid .pu-divider__line {
   background-image: none;
 }
@@ -132,7 +129,6 @@ const dividerClass = computed(() => {
   filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'%3E%3Cpath d='M0,1 Q2.5,0 5,1 T10,1' stroke='currentColor' fill='none' stroke-width='1'/%3E%3C/svg%3E");
 }
 
-
 .pu-divider--vertical.pu-divider--dashed .pu-divider__line {
   background-image:
     repeating-linear-gradient(
@@ -166,7 +162,6 @@ const dividerClass = computed(() => {
     );
 }
 
-
 .pu-divider__text {
   @apply px-4 text-sm text-gray-500 dark:text-primary-light-300 font-medium;
   background:
@@ -188,7 +183,6 @@ const dividerClass = computed(() => {
   @apply flex-1;
 }
 
-
 .pu-divider--small .pu-divider__line {
   height: 1px;
 }
@@ -216,7 +210,6 @@ const dividerClass = computed(() => {
   height: 100%;
 }
 
-
 .pu-divider__line {
   position: relative;
 }

src/runtime/components/PUDropdown.vue

@@ -119,7 +119,8 @@ const menuStyle = computed(() => {
   let top: string
   if (shouldOpenAbove) {
     top = `${rect.top - 4}px`
-  } else {
+  }
+  else {
     top = `${rect.bottom + 4}px`
   }
 

src/runtime/components/PUGrid.vue

@@ -68,7 +68,7 @@ const gridStyles = computed(() => {
 <style lang="css" scoped>
 .pu-grid {
   @apply relative;
-  
+
   background:
     radial-gradient(circle at 20% 20%, rgba(28, 28, 28, 0.05) 0%, transparent 50%),
     radial-gradient(circle at 80% 80%, rgba(28, 28, 28, 0.05) 0%, transparent 50%);
@@ -83,7 +83,6 @@ const gridStyles = computed(() => {
   z-index: -1;
 }
 
-
 .pu-grid--gap-none {
   gap: 0;
 }
@@ -100,7 +99,6 @@ const gridStyles = computed(() => {
   gap: 2rem;
 }
 
-
 .pu-grid--align-start {
   align-items: start;
 }
@@ -117,7 +115,6 @@ const gridStyles = computed(() => {
   align-items: stretch;
 }
 
-
 .pu-grid--justify-start {
   justify-items: start;
 }
@@ -142,18 +139,15 @@ const gridStyles = computed(() => {
   justify-content: space-evenly;
 }
 
-
 .pu-grid--responsive {
   @apply grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6;
 }
 
-
 .dark .pu-grid::before {
   background-image:
     url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='none' stroke='%23464646' stroke-width='0.5' stroke-dasharray='2,2'/%3E%3C/svg%3E");
 }
 
-
 .pu-grid > * {
   @apply transition-all duration-200 ease-in-out;
 }
@@ -163,12 +157,10 @@ const gridStyles = computed(() => {
   filter: drop-shadow(0 4px 8px rgba(28, 28, 28, 0.1));
 }
 
-
 .dark .pu-grid > *:hover {
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
 }
 
-
 .pu-grid > * {
   animation: gridItemEnter 0.3s ease-out;
 }
@@ -184,7 +176,6 @@ const gridStyles = computed(() => {
   }
 }
 
-
 .pu-grid > * {
   @apply relative;
 }

src/runtime/components/PUGridItem.vue

@@ -72,13 +72,12 @@ const itemStyles = computed(() => {
 <style lang="css" scoped>
 .pu-grid-item {
   @apply relative p-4 bg-white dark:bg-primary-light-600 rounded-lg border border-gray-200 dark:border-primary-light-400;
-  
+
   box-shadow:
     0 2px 4px rgba(28, 28, 28, 0.1),
     0 1px 2px rgba(28, 28, 28, 0.05);
 }
 
-
 .pu-grid-item::before {
   content: '';
   @apply absolute inset-0 pointer-events-none;
@@ -97,7 +96,6 @@ const itemStyles = computed(() => {
   mask-composite: xor;
 }
 
-
 .pu-grid-item::after {
   content: '';
   @apply absolute top-0 right-0 w-3 h-3 pointer-events-none;
@@ -106,7 +104,6 @@ const itemStyles = computed(() => {
   border-radius: 0 12px 0 0;
 }
 
-
 .pu-grid-item--align-start {
   align-self: start;
 }
@@ -123,7 +120,6 @@ const itemStyles = computed(() => {
   align-self: stretch;
 }
 
-
 .pu-grid-item--justify-start {
   justify-self: start;
 }
@@ -140,7 +136,6 @@ const itemStyles = computed(() => {
   justify-self: stretch;
 }
 
-
 .pu-grid-item:hover {
   @apply transform scale-[1.02] shadow-lg;
   box-shadow:
@@ -149,7 +144,6 @@ const itemStyles = computed(() => {
   filter: drop-shadow(0 4px 8px rgba(28, 28, 28, 0.1));
 }
 
-
 .pu-grid-item {
   animation: gridItemEnter 0.4s ease-out;
 }
@@ -165,7 +159,6 @@ const itemStyles = computed(() => {
   }
 }
 
-
 .dark .pu-grid-item {
   @apply bg-primary-light-600 border-primary-light-400;
   box-shadow:
@@ -185,7 +178,6 @@ const itemStyles = computed(() => {
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
 }
 
-
 @media (max-width: 640px) {
   .pu-grid-item {
     @apply p-3;

src/runtime/components/PULoading.vue

@@ -87,7 +87,6 @@ const loadingClass = computed(() => [
   @apply flex flex-col items-center justify-center;
 }
 
-
 .pu-loading__circular {
   @apply relative;
 }
@@ -122,7 +121,6 @@ const loadingClass = computed(() => [
   }
 }
 
-
 .pu-loading__dots {
   @apply flex gap-2;
 }
@@ -149,7 +147,6 @@ const loadingClass = computed(() => [
   }
 }
 
-
 .pu-loading__skeleton {
   @apply space-y-2 w-full;
 }
@@ -180,12 +177,10 @@ const loadingClass = computed(() => [
   }
 }
 
-
 .pu-loading__text {
   @apply mt-2 text-sm text-gray-600 dark:text-primary-light-300;
 }
 
-
 .pu-loading--small .pu-loading__spinner {
   @apply w-6 h-6;
 }
@@ -222,7 +217,6 @@ const loadingClass = computed(() => [
   @apply h-6;
 }
 
-
 .pu-loading__spinner {
   filter: drop-shadow(0 2px 4px rgba(28, 28, 28, 0.1));
 }