@datametria/vue-components 1.1.3 → 2.0.1

package/src/components/DatametriaAvatar.vue

@@ -1,90 +1,174 @@
 <template>
   <div
     class="dm-avatar"
-    :class="[`dm-avatar--${size}`, { 'dm-avatar--rounded': rounded }]"
-    :aria-label="ariaLabel || name"
+    :class="avatarClasses"
+    :style="avatarStyles"
+    @click="handleClick"
   >
     <img
-      v-if="src"
+      v-if="src && !imageError"
       :src="src"
-      :alt="alt || name"
+      :alt="alt || `${name} avatar`"
       class="dm-avatar__image"
       @error="handleImageError"
+      @load="handleImageLoad"
     />
-    <span v-else class="dm-avatar__initials">{{ initials }}</span>
+    
+    <div
+      v-else-if="name && !loading"
+      class="dm-avatar__initials"
+      :style="{ color: textColor }"
+    >
+      {{ initials }}
+    </div>
+    
+    <div v-else-if="!loading" class="dm-avatar__icon">
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
+    </div>
+
+    <div v-if="loading" class="dm-avatar__loading">
+      <div class="dm-avatar__spinner"></div>
+    </div>
+
+    <div
+      v-if="badge && status"
+      class="dm-avatar__badge"
+      :class="`dm-avatar__badge--${status}`"
+    ></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, computed } from 'vue'
 
 interface Props {
   src?: string
   name?: string
   alt?: string
   size?: 'sm' | 'md' | 'lg' | 'xl'
-  rounded?: boolean
-  ariaLabel?: string
+  variant?: 'circular' | 'rounded' | 'square'
+  backgroundColor?: string
+  textColor?: string
+  clickable?: boolean
+  loading?: boolean
+  badge?: boolean
+  status?: 'online' | 'offline' | 'away' | 'busy'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'md',
-  rounded: false
+  variant: 'circular',
+  clickable: false,
+  loading: false,
+  badge: false
 })
 
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
 const imageError = ref(false)
 
 const initials = computed(() => {
-  if (!props.name) return '?'
-  const names = props.name.trim().split(' ')
-  if (names.length === 1) return names[0].charAt(0).toUpperCase()
-  return (names[0].charAt(0) + names[names.length - 1].charAt(0)).toUpperCase()
+  if (!props.name) return ''
+  const names = props.name.split(' ')
+  if (names.length === 1) {
+    return names[0].charAt(0).toUpperCase()
+  }
+  return names[0].charAt(0).toUpperCase() + names[names.length - 1].charAt(0).toUpperCase()
 })
 
+const avatarClasses = computed(() => [
+  `dm-avatar--${props.size}`,
+  `dm-avatar--${props.variant}`,
+  {
+    'dm-avatar--clickable': props.clickable,
+    'dm-avatar--loading': props.loading
+  }
+])
+
+const avatarStyles = computed(() => ({
+  backgroundColor: props.backgroundColor || 'var(--dm-primary, #0072ce)'
+}))
+
+const handleClick = (event: MouseEvent) => {
+  if (props.clickable) {
+    emit('click', event)
+  }
+}
+
 const handleImageError = () => {
   imageError.value = true
 }
+
+const handleImageLoad = () => {
+  imageError.value = false
+}
 </script>
 
 <style scoped>
 .dm-avatar {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--dm-primary);
-  color: var(--dm-white);
-  font-weight: 600;
   overflow: hidden;
-  flex-shrink: 0;
-  border-radius: 50%;
+  background-color: var(--dm-neutral-300, #d1d5db);
+  color: white;
+  font-weight: 500;
+  user-select: none;
 }
 
 .dm-avatar--sm {
-  width: 32px;
-  height: 32px;
-  font-size: var(--dm-text-xs);
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.75rem;
 }
 
 .dm-avatar--md {
-  width: 40px;
-  height: 40px;
-  font-size: var(--dm-text-sm);
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 0.875rem;
 }
 
 .dm-avatar--lg {
-  width: 56px;
-  height: 56px;
-  font-size: var(--dm-text-base);
+  width: 3rem;
+  height: 3rem;
+  font-size: 1rem;
 }
 
 .dm-avatar--xl {
-  width: 80px;
-  height: 80px;
-  font-size: var(--dm-text-lg);
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.25rem;
+}
+
+.dm-avatar--circular {
+  border-radius: 50%;
 }
 
 .dm-avatar--rounded {
-  border-radius: var(--dm-radius);
+  border-radius: var(--dm-radius-md, 0.375rem);
+}
+
+.dm-avatar--square {
+  border-radius: 0;
+}
+
+.dm-avatar--clickable {
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.dm-avatar--clickable:hover {
+  transform: scale(1.05);
+  box-shadow: var(--dm-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+}
+
+.dm-avatar--loading {
+  opacity: 0.6;
 }
 
 .dm-avatar__image {
@@ -94,6 +178,66 @@ const handleImageError = () => {
 }
 
 .dm-avatar__initials {
-  user-select: none;
+  font-weight: 600;
+}
+
+.dm-avatar__icon {
+  width: 60%;
+  height: 60%;
+  opacity: 0.8;
+}
+
+.dm-avatar__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dm-avatar__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.dm-avatar__spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid var(--dm-neutral-300, #d1d5db);
+  border-top: 2px solid var(--dm-primary, #0072ce);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.dm-avatar__badge {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 2px solid white;
+  border-radius: 50%;
+}
+
+.dm-avatar__badge--online {
+  background-color: var(--dm-success, #10b981);
+}
+
+.dm-avatar__badge--offline {
+  background-color: var(--dm-neutral-400, #9ca3af);
+}
+
+.dm-avatar__badge--away {
+  background-color: var(--dm-warning, #f59e0b);
+}
+
+.dm-avatar__badge--busy {
+  background-color: var(--dm-error, #ef4444);
 }
-</style>
+</style>

package/src/components/DatametriaBadge.vue

@@ -16,10 +16,18 @@ interface Props {
   ariaLabel?: string
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   variant: 'primary',
   size: 'md'
 })
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = ['primary', 'secondary', 'success', 'warning', 'error', 'info']
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaBadge] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
 </script>
 
 <style scoped>
@@ -27,64 +35,64 @@ withDefaults(defineProps<Props>(), {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: 600;
-  border-radius: 12px;
+  font-weight: var(--dm-font-weight-semibold, 600);
+  border-radius: var(--dm-radius-full, 12px);
   white-space: nowrap;
   user-select: none;
 }
 
 .dm-badge--sm {
-  padding: 2px 8px;
-  font-size: var(--dm-text-xs);
+  padding: var(--dm-spacing-0-5, 0.125rem) var(--dm-spacing-2, 0.5rem);
+  font-size: var(--dm-font-size-xs, 0.75rem);
   min-height: 20px;
 }
 
 .dm-badge--md {
-  padding: 4px 12px;
-  font-size: var(--dm-text-sm);
+  padding: var(--dm-spacing-1, 0.25rem) var(--dm-spacing-3, 0.75rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
   min-height: 24px;
 }
 
 .dm-badge--lg {
-  padding: 6px 16px;
-  font-size: var(--dm-text-base);
+  padding: var(--dm-spacing-1-5, 0.375rem) var(--dm-spacing-4, 1rem);
+  font-size: var(--dm-font-size-base, 1rem);
   min-height: 32px;
 }
 
 .dm-badge--primary {
-  background: var(--dm-primary);
-  color: var(--dm-white);
+  background: var(--dm-primary, #0072CE);
+  color: var(--dm-neutral-50, #ffffff);
 }
 
 .dm-badge--secondary {
-  background: var(--dm-secondary);
-  color: var(--dm-white);
+  background: var(--dm-secondary, #4B0078);
+  color: var(--dm-neutral-50, #ffffff);
 }
 
 .dm-badge--success {
-  background: var(--dm-success);
-  color: var(--dm-white);
+  background: var(--dm-success, #10b981);
+  color: var(--dm-neutral-50, #ffffff);
 }
 
 .dm-badge--warning {
-  background: var(--dm-warning);
-  color: var(--dm-gray-900);
+  background: var(--dm-warning, #f59e0b);
+  color: var(--dm-neutral-900, #111827);
 }
 
 .dm-badge--error {
-  background: var(--dm-error);
-  color: var(--dm-white);
+  background: var(--dm-error, #ef4444);
+  color: var(--dm-neutral-50, #ffffff);
 }
 
 .dm-badge--info {
-  background: var(--dm-gray-200);
-  color: var(--dm-gray-900);
+  background: var(--dm-neutral-200, #e5e7eb);
+  color: var(--dm-neutral-900, #111827);
 }
 
 @media (prefers-color-scheme: dark) {
   .dm-badge--info {
-    background: var(--dm-gray-700);
-    color: var(--dm-white);
+    background: var(--dm-neutral-700, #374151);
+    color: var(--dm-neutral-50, #ffffff);
   }
 }
 </style>

package/src/components/DatametriaBreadcrumb.vue

@@ -66,7 +66,7 @@ const handleClick = (_event: Event, item: BreadcrumbItem, index: number) => {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--dm-space-2);
+  gap: var(--dm-spacing-2, 0.5rem);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -75,16 +75,16 @@ const handleClick = (_event: Event, item: BreadcrumbItem, index: number) => {
 .dm-breadcrumb__item {
   display: flex;
   align-items: center;
-  gap: var(--dm-space-2);
+  gap: var(--dm-spacing-2, 0.5rem);
 }
 
 .dm-breadcrumb__link {
-  color: var(--dm-primary);
+  color: var(--dm-primary, #0072CE);
   text-decoration: none;
-  font-size: var(--dm-text-sm);
-  transition: var(--dm-transition);
-  padding: var(--dm-space-1) var(--dm-space-2);
-  border-radius: var(--dm-radius);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  transition: all 0.2s;
+  padding: var(--dm-spacing-1, 0.25rem) var(--dm-spacing-2, 0.5rem);
+  border-radius: var(--dm-radius-md, 0.375rem);
   min-height: 32px;
   display: inline-flex;
   align-items: center;
@@ -92,53 +92,53 @@ const handleClick = (_event: Event, item: BreadcrumbItem, index: number) => {
 
 .dm-breadcrumb__link:hover {
   text-decoration: underline;
-  background: var(--dm-gray-100);
+  background: var(--dm-neutral-100, #f3f4f6);
 }
 
 .dm-breadcrumb__link:focus-visible {
-  outline: var(--dm-focus-ring);
+  outline: 2px solid var(--dm-primary, #0072CE);
   outline-offset: 2px;
 }
 
 .dm-breadcrumb__current {
-  color: var(--dm-text-primary);
-  font-size: var(--dm-text-sm);
-  font-weight: 500;
-  padding: var(--dm-space-1) var(--dm-space-2);
+  color: var(--dm-neutral-900, #111827);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  padding: var(--dm-spacing-1, 0.25rem) var(--dm-spacing-2, 0.5rem);
 }
 
 .dm-breadcrumb__separator {
-  color: var(--dm-gray-400);
-  font-size: var(--dm-text-sm);
+  color: var(--dm-neutral-400, #9ca3af);
+  font-size: var(--dm-font-size-sm, 0.875rem);
   user-select: none;
 }
 
 @media (max-width: 640px) {
   .dm-breadcrumb__list {
-    gap: var(--dm-space-1);
+    gap: var(--dm-spacing-1, 0.25rem);
   }
 
   .dm-breadcrumb__item {
-    gap: var(--dm-space-1);
+    gap: var(--dm-spacing-1, 0.25rem);
   }
 
   .dm-breadcrumb__link,
   .dm-breadcrumb__current {
-    font-size: var(--dm-text-xs);
+    font-size: var(--dm-font-size-xs, 0.75rem);
   }
 }
 
 @media (prefers-color-scheme: dark) {
   .dm-breadcrumb__link:hover {
-    background: var(--dm-gray-800);
+    background: var(--dm-neutral-800, #1f2937);
   }
 
   .dm-breadcrumb__current {
-    color: var(--dm-white);
+    color: white;
   }
 
   .dm-breadcrumb__separator {
-    color: var(--dm-gray-600);
+    color: var(--dm-neutral-600, #4b5563);
   }
 }
 </style>

package/src/components/DatametriaButton.vue

@@ -34,6 +34,14 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'button'
 })
 
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = Object.values(ButtonVariant)
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaButton] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
 defineEmits<{
   click: [event: MouseEvent]
 }>()
@@ -57,9 +65,9 @@ const buttonClasses = computed(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: 500;
-  border-radius: var(--dm-radius);
-  transition: var(--dm-transition);
+  font-weight: var(--dm-font-medium, 500);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  transition: var(--dm-transition-base, 200ms);
   cursor: pointer;
   border: 1px solid transparent;
   font-family: var(--dm-font-sans, -apple-system, sans-serif);
@@ -68,60 +76,72 @@ const buttonClasses = computed(() => {
 }
 
 .datametria-button--primary {
-  background: var(--dm-primary);
+  background: var(--dm-primary, #0072CE);
   color: white;
 }
 
 .datametria-button--primary:hover:not(:disabled) {
-  background: #005ba3;
+  filter: brightness(0.9);
 }
 
 .datametria-button--primary:focus-visible {
   outline: none;
-  box-shadow: var(--dm-focus-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
 }
 
 .datametria-button--secondary {
-  background: var(--dm-secondary);
+  background: var(--dm-secondary, #4B0078);
   color: white;
 }
 
+.datametria-button--secondary:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+
 .datametria-button--secondary:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(75, 0, 120, 0.1);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-secondary, #4B0078) 20%, transparent);
 }
 
 .datametria-button--outline {
   background: transparent;
-  border-color: var(--dm-primary);
-  color: var(--dm-primary);
+  border-color: var(--dm-primary, #0072CE);
+  color: var(--dm-primary, #0072CE);
+}
+
+.datametria-button--outline:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
 }
 
 .datametria-button--outline:focus-visible {
   outline: none;
-  box-shadow: var(--dm-focus-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
 }
 
 .datametria-button--ghost {
   background: transparent;
-  color: #0072CE;
+  color: var(--dm-primary, #0072CE);
+}
+
+.datametria-button--ghost:hover:not(:disabled) {
+  background: var(--dm-neutral-100, #f3f4f6);
 }
 
 .datametria-button--sm {
-  padding: var(--dm-space-2) var(--dm-space-4);
-  font-size: var(--dm-text-sm);
+  padding: var(--dm-space-2, 0.5rem) var(--dm-space-4, 1rem);
+  font-size: var(--dm-text-sm, 0.875rem);
   min-height: 2rem;
 }
 
 .datametria-button--md {
-  padding: var(--dm-space-3) calc(var(--dm-space-4) * 1.5);
-  font-size: var(--dm-text-base);
+  padding: var(--dm-space-3, 0.75rem) calc(var(--dm-space-4, 1rem) * 1.5);
+  font-size: var(--dm-text-base, 1rem);
   min-height: 2.5rem;
 }
 
 .datametria-button--lg {
-  padding: var(--dm-space-4) calc(var(--dm-space-4) * 2);
-  font-size: var(--dm-text-lg);
+  padding: var(--dm-space-4, 1rem) calc(var(--dm-space-4, 1rem) * 2);
+  font-size: var(--dm-text-lg, 1.125rem);
   min-height: 3rem;
 }
 

package/src/components/DatametriaCard.vue

@@ -38,26 +38,26 @@ const cardClasses = computed(() => [
 
 <style scoped>
 .datametria-card {
-  background: white;
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  background: var(--dm-neutral-50, #ffffff);
+  border-radius: var(--dm-radius-lg, 0.5rem);
+  box-shadow: var(--dm-shadow-sm, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
   overflow: hidden;
 }
 
 .datametria-card__header {
-  padding: 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
+  padding: var(--dm-spacing-6, 1.5rem);
+  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
 }
 
 .datametria-card__title {
   margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #111827;
+  font-size: var(--dm-font-size-xl, 1.25rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+  color: var(--dm-neutral-900, #111827);
 }
 
 .datametria-card__content {
-  padding: 1.5rem;
+  padding: var(--dm-spacing-6, 1.5rem);
 }
 
 .datametria-card--no-padding .datametria-card__content {
@@ -65,8 +65,8 @@ const cardClasses = computed(() => [
 }
 
 .datametria-card__footer {
-  padding: 1.5rem;
-  border-top: 1px solid #e5e7eb;
-  background: #f9fafb;
+  padding: var(--dm-spacing-6, 1.5rem);
+  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-neutral-100, #f9fafb);
 }
 </style>

package/src/components/DatametriaCheckbox.vue

@@ -33,7 +33,7 @@ defineEmits<{
 .datametria-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--dm-spacing-2, 0.5rem);
   cursor: pointer;
   user-select: none;
 }
@@ -48,14 +48,14 @@ defineEmits<{
   position: relative;
   width: 1.25rem;
   height: 1.25rem;
-  border: 2px solid #d1d5db;
-  border-radius: 0.25rem;
+  border: 2px solid var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-sm, 0.25rem);
   transition: all 0.2s;
 }
 
 .datametria-checkbox__input:checked ~ .datametria-checkbox__checkmark {
-  background: #0072CE;
-  border-color: #0072CE;
+  background: var(--dm-primary, #0072CE);
+  border-color: var(--dm-primary, #0072CE);
 }
 
 .datametria-checkbox__input:checked ~ .datametria-checkbox__checkmark::after {
@@ -71,12 +71,12 @@ defineEmits<{
 }
 
 .datametria-checkbox__input:disabled ~ .datametria-checkbox__checkmark {
-  background: #f3f4f6;
+  background: var(--dm-neutral-100, #f3f4f6);
   cursor: not-allowed;
 }
 
 .datametria-checkbox__label {
-  font-size: 0.875rem;
-  color: #374151;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-700, #374151);
 }
 </style>