@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaSkeleton.vue

@@ -1,244 +1,267 @@
-<template>
-  <div 
-    class="datametria-skeleton"
-    :class="[
-      `datametria-skeleton--${variant}`,
-      { 'datametria-skeleton--animated': animated }
-    ]"
-    :style="skeletonStyle"
-    :aria-label="ariaLabel"
-    role="status"
-    aria-live="polite"
-  >
-    <div v-if="variant === 'text'" class="datametria-skeleton__text">
-      <div 
-        v-for="line in lines" 
-        :key="line"
-        class="datametria-skeleton__line shimmer"
-        :style="getLineStyle(line)"
-      ></div>
-    </div>
-    
-    <div v-else-if="variant === 'avatar'" class="datametria-skeleton__avatar shimmer"></div>
-    
-    <div v-else-if="variant === 'card'" class="datametria-skeleton__card">
-      <div class="datametria-skeleton__card-header shimmer"></div>
-      <div class="datametria-skeleton__card-content">
-        <div class="datametria-skeleton__line shimmer" style="width:100%"></div>
-        <div class="datametria-skeleton__line shimmer" style="width:80%"></div>
-        <div class="datametria-skeleton__line shimmer" style="width:60%"></div>
-      </div>
-    </div>
-    
-    <div v-else-if="variant === 'button'" class="datametria-skeleton__button shimmer"></div>
-    
-    <div v-else class="datametria-skeleton__custom shimmer"></div>
-  </div>
-</template>
+<template>
+  <div 
+    class="datametria-skeleton"
+    :class="[
+      `datametria-skeleton--${variant}`,
+      { 'datametria-skeleton--animated': animated }
+    ]"
+    :style="skeletonStyle"
+    :aria-label="ariaLabel"
+    role="status"
+    aria-live="polite"
+  >
+    <div v-if="variant === 'text'" class="datametria-skeleton__text">
+      <div 
+        v-for="line in lines" 
+        :key="line"
+        class="datametria-skeleton__line shimmer"
+        :style="getLineStyle(line)"
+      ></div>
+    </div>
+    
+    <div v-else-if="variant === 'avatar'" class="datametria-skeleton__avatar shimmer"></div>
+    
+    <div v-else-if="variant === 'card'" class="datametria-skeleton__card">
+      <div class="datametria-skeleton__card-header shimmer"></div>
+      <div class="datametria-skeleton__card-content">
+        <div class="datametria-skeleton__line shimmer" style="width:100%"></div>
+        <div class="datametria-skeleton__line shimmer" style="width:80%"></div>
+        <div class="datametria-skeleton__line shimmer" style="width:60%"></div>
+      </div>
+    </div>
+    
+    <div v-else-if="variant === 'button'" class="datametria-skeleton__button shimmer"></div>
+    
+    <div v-else class="datametria-skeleton__custom shimmer"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type SkeletonVariant = 'text' | 'avatar' | 'card' | 'button' | 'custom'
+
+interface Props {
+  variant?: SkeletonVariant
+  width?: string | number
+  height?: string | number
+  lines?: number
+  animated?: boolean
+  ariaLabel?: string
+  lastLineWidth?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'text',
+  lines: 3,
+  animated: true,
+  ariaLabel: 'Carregando conteúdo...',
+  lastLineWidth: 75
+})
+
+// Computed
+const skeletonStyle = computed(() => {
+  const style: Record<string, string> = {}
+  
+  if (props.width) {
+    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
+  }
+  
+  if (props.height) {
+    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
+  }
+  
+  return style
+})
+
+const getLineStyle = (lineNumber: number) => {
+  // Use 100% for all lines except the last one
+  const isLastLine = lineNumber === props.lines
+  const width = isLastLine ? `${props.lastLineWidth}%` : '100%'
+  
+  return {
+    width,
+    marginBottom: lineNumber < props.lines ? '0.5rem' : '0'
+  }
+}
+</script>
+
+<style scoped>
+.datametria-skeleton {
+  background-color: var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+}
+
+.datametria-skeleton--animated {
+  background: linear-gradient(90deg, 
+    var(--dm-neutral-200, #e5e7eb) 25%, 
+    var(--dm-neutral-100, #f3f4f6) 50%, 
+    var(--dm-neutral-200, #e5e7eb) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
 
-<script setup lang="ts">
-import { computed } from 'vue'
-
-type SkeletonVariant = 'text' | 'avatar' | 'card' | 'button' | 'custom'
-
-interface Props {
-  variant?: SkeletonVariant
-  width?: string | number
-  height?: string | number
-  lines?: number
-  animated?: boolean
-  ariaLabel?: string
-  lastLineWidth?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'text',
-  lines: 3,
-  animated: true,
-  ariaLabel: 'Carregando conteúdo...',
-  lastLineWidth: 75
-})
-
-// Computed
-const skeletonStyle = computed(() => {
-  const style: Record<string, string> = {}
-  
-  if (props.width) {
-    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
-  }
-  
-  if (props.height) {
-    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
-  }
-  
-  return style
-})
-
-const getLineStyle = (lineNumber: number) => {
-  // Use 100% for all lines except the last one
-  const isLastLine = lineNumber === props.lines
-  const width = isLastLine ? `${props.lastLineWidth}%` : '100%'
-  
-  return {
-    width,
-    marginBottom: lineNumber < props.lines ? '0.5rem' : '0'
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-skeleton {
+    background-color: var(--dm-neutral-700, #374151);
   }
 }
-</script>
-
-<style scoped>
-.datametria-skeleton {
-  background-color: var(--dm-neutral-200, #e5e7eb);
-  border-radius: var(--dm-radius-md, 0.375rem);
-}
-
-.datametria-skeleton--animated {
-  background: linear-gradient(90deg, 
-    var(--dm-neutral-200, #e5e7eb) 25%, 
-    var(--dm-neutral-100, #f3f4f6) 50%, 
-    var(--dm-neutral-200, #e5e7eb) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.5s ease-in-out infinite;
-}
-
-[data-theme="dark"] .datametria-skeleton {
-  background-color: var(--dm-neutral-700, #374151);
-}
-
-[data-theme="dark"] .datametria-skeleton--animated {
-  background: linear-gradient(90deg, 
-    var(--dm-neutral-700, #374151) 25%, 
-    var(--dm-neutral-600, #4b5563) 50%, 
-    var(--dm-neutral-700, #374151) 75%
-  );
-  background-size: 200% 100%;
-}
-
-/* Shimmer class for individual elements */
-.shimmer {
-  background: inherit;
-  animation: inherit;
-}
-
-/* Text variant */
-.datametria-skeleton--text {
-  @apply w-full;
-}
-
-.datametria-skeleton__text {
-  @apply space-y-2;
-}
-
-.datametria-skeleton__line {
-  height: 1rem;
-  background: inherit;
-  border-radius: var(--dm-radius-md, 0.375rem);
-}
-
-/* Avatar variant */
-.datametria-skeleton--avatar {
-  @apply w-12 h-12 rounded-full;
-}
-
-.datametria-skeleton__avatar {
-  @apply w-full h-full rounded-full;
-  background: inherit;
-}
-
-/* Card variant */
-.datametria-skeleton--card {
-  @apply w-full p-4;
-}
-
-.datametria-skeleton__card-header {
-  height: 1.5rem;
-  width: 75%;
-  margin-bottom: 1rem;
-  background: inherit;
-  border-radius: var(--dm-radius-md, 0.375rem);
-}
-
-.datametria-skeleton__card-content {
-  @apply space-y-2;
-}
-
-.datametria-skeleton__card-content .datametria-skeleton__line {
-  background: inherit;
-}
-
-/* Button variant */
-.datametria-skeleton--button {
-  @apply h-10 w-24 rounded;
-}
-
-.datametria-skeleton__button {
-  width: 100%;
-  height: 100%;
-  background: inherit;
-  border-radius: var(--dm-radius-md, 0.375rem);
-}
-
-/* Custom variant */
-.datametria-skeleton--custom {
-  width: 100%;
-  height: 1rem;
-}
-
-.datametria-skeleton__custom {
-  width: 100%;
-  height: 100%;
-  background: inherit;
-  border-radius: var(--dm-radius-md, 0.375rem);
-}
 
-/* Shimmer animation */
-@keyframes shimmer {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-skeleton {
+  background-color: var(--dm-neutral-700, #374151);
+}
+
 
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
   .datametria-skeleton--animated {
-    animation: none;
-    background: var(--dm-neutral-200, #e5e7eb);
-  }
-  
-  [data-theme="dark"] .datametria-skeleton--animated {
-    background: var(--dm-neutral-700, #374151);
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .datametria-skeleton {
-    @apply border border-gray-400;
-  }
-  
-  [data-theme="dark"] .datametria-skeleton {
-    @apply border-gray-500;
+    background: linear-gradient(90deg, 
+    var(--dm-neutral-700, #374151) 25%, 
+    var(--dm-neutral-600, #4b5563) 50%, 
+    var(--dm-neutral-700, #374151) 75%
+  );
+  background-size: 200% 100%;
   }
 }
 
-/* Size variants */
-.datametria-skeleton--sm .datametria-skeleton__line {
-  @apply h-3;
-}
-
-.datametria-skeleton--lg .datametria-skeleton__line {
-  @apply h-5;
-}
-
-.datametria-skeleton--sm.datametria-skeleton--avatar {
-  @apply w-8 h-8;
-}
-
-.datametria-skeleton--lg.datametria-skeleton--avatar {
-  @apply w-16 h-16;
-}
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-skeleton--animated {
+  background: linear-gradient(90deg, 
+    var(--dm-neutral-700, #374151) 25%, 
+    var(--dm-neutral-600, #4b5563) 50%, 
+    var(--dm-neutral-700, #374151) 75%
+  );
+  background-size: 200% 100%;
+}
+
+/* Shimmer class for individual elements */
+.shimmer {
+  background: inherit;
+  animation: inherit;
+}
+
+/* Text variant */
+.datametria-skeleton--text {
+  @apply w-full;
+}
+
+.datametria-skeleton__text {
+  @apply space-y-2;
+}
+
+.datametria-skeleton__line {
+  height: 1rem;
+  background: inherit;
+  border-radius: var(--dm-radius-md, 0.375rem);
+}
+
+/* Avatar variant */
+.datametria-skeleton--avatar {
+  @apply w-12 h-12 rounded-full;
+}
+
+.datametria-skeleton__avatar {
+  @apply w-full h-full rounded-full;
+  background: inherit;
+}
+
+/* Card variant */
+.datametria-skeleton--card {
+  @apply w-full p-4;
+}
+
+.datametria-skeleton__card-header {
+  height: 1.5rem;
+  width: 75%;
+  margin-bottom: 1rem;
+  background: inherit;
+  border-radius: var(--dm-radius-md, 0.375rem);
+}
+
+.datametria-skeleton__card-content {
+  @apply space-y-2;
+}
+
+.datametria-skeleton__card-content .datametria-skeleton__line {
+  background: inherit;
+}
+
+/* Button variant */
+.datametria-skeleton--button {
+  @apply h-10 w-24 rounded;
+}
+
+.datametria-skeleton__button {
+  width: 100%;
+  height: 100%;
+  background: inherit;
+  border-radius: var(--dm-radius-md, 0.375rem);
+}
+
+/* Custom variant */
+.datametria-skeleton--custom {
+  width: 100%;
+  height: 1rem;
+}
+
+.datametria-skeleton__custom {
+  width: 100%;
+  height: 100%;
+  background: inherit;
+  border-radius: var(--dm-radius-md, 0.375rem);
+}
+
+/* Shimmer animation */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .datametria-skeleton--animated {
+    animation: none;
+    background: var(--dm-neutral-200, #e5e7eb);
+  }
+  
+  [data-theme="dark"] .datametria-skeleton--animated {
+    background: var(--dm-neutral-700, #374151);
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .datametria-skeleton {
+    @apply border border-gray-400;
+  }
+  
+  [data-theme="dark"] .datametria-skeleton {
+    @apply border-gray-500;
+  }
+}
+
+/* Size variants */
+.datametria-skeleton--sm .datametria-skeleton__line {
+  @apply h-3;
+}
+
+.datametria-skeleton--lg .datametria-skeleton__line {
+  @apply h-5;
+}
+
+.datametria-skeleton--sm.datametria-skeleton--avatar {
+  @apply w-8 h-8;
+}
+
+.datametria-skeleton--lg.datametria-skeleton--avatar {
+  @apply w-16 h-16;
+}
 </style>