@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaAvatar.vue

@@ -1,243 +1,261 @@
-<template>
-  <div
-    class="dm-avatar"
-    :class="avatarClasses"
-    :style="avatarStyles"
-    @click="handleClick"
-  >
-    <img
-      v-if="src && !imageError"
-      :src="src"
-      :alt="alt || `${name} avatar`"
-      class="dm-avatar__image"
-      @error="handleImageError"
-      @load="handleImageLoad"
-    />
-    
-    <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 { ref, computed } from 'vue'
-
-interface Props {
-  src?: string
-  name?: string
-  alt?: string
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  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',
-  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.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)
+<template>
+  <div
+    class="dm-avatar"
+    :class="avatarClasses"
+    :style="avatarStyles"
+    @click="handleClick"
+  >
+    <img
+      v-if="src && !imageError"
+      :src="src"
+      :alt="alt || `${name} avatar`"
+      class="dm-avatar__image"
+      @error="handleImageError"
+      @load="handleImageLoad"
+    />
+    
+    <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 { ref, computed } from 'vue'
+
+interface Props {
+  src?: string
+  name?: string
+  alt?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  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',
+  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.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;
+  overflow: hidden;
+  background-color: var(--dm-neutral-300, #d1d5db);
+  color: white;
+  font-weight: 500;
+  user-select: none;
+}
+
+.dm-avatar--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.75rem;
+}
+
+.dm-avatar--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 0.875rem;
+}
+
+.dm-avatar--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1rem;
+}
+
+.dm-avatar--xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.25rem;
+}
+
+.dm-avatar--circular {
+  border-radius: 50%;
+}
+
+.dm-avatar--rounded {
+  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 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dm-avatar__initials {
+  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);
+}
+
+/* Dark Mode Support - Hybrid Approach */
+
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .dm-avatar {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
 }
 
-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;
-  overflow: hidden;
-  background-color: var(--dm-neutral-300, #d1d5db);
-  color: white;
-  font-weight: 500;
-  user-select: none;
-}
-
-.dm-avatar--sm {
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.75rem;
-}
-
-.dm-avatar--md {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 0.875rem;
-}
-
-.dm-avatar--lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1rem;
-}
-
-.dm-avatar--xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: 1.25rem;
-}
-
-.dm-avatar--circular {
-  border-radius: 50%;
-}
-
-.dm-avatar--rounded {
-  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 {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.dm-avatar__initials {
-  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);
+/* Controle manual via useTheme() */
+[data-theme="dark"] .dm-avatar {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
 </style>

package/src/components/DatametriaBadge.vue

@@ -1,98 +1,103 @@
-<template>
-  <span
-    class="dm-badge"
-    :class="[`dm-badge--${variant}`, `dm-badge--${size}`]"
-    :aria-label="ariaLabel"
-  >
-    <slot>{{ label }}</slot>
-  </span>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  label?: string
-  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'
-  size?: 'sm' | 'md' | 'lg'
-  ariaLabel?: string
-}
-
-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(', ')}`)
+<template>
+  <span
+    class="dm-badge"
+    :class="[`dm-badge--${variant}`, `dm-badge--${size}`]"
+    :aria-label="ariaLabel"
+  >
+    <slot>{{ label }}</slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  label?: string
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'
+  size?: 'sm' | 'md' | 'lg'
+  ariaLabel?: string
+}
+
+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>
+.dm-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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: 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: 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: 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, #0072CE);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-badge--secondary {
+  background: var(--dm-secondary, #4B0078);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-badge--success {
+  background: var(--dm-success, #10b981);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-badge--warning {
+  background: var(--dm-warning, #f59e0b);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.dm-badge--error {
+  background: var(--dm-error, #ef4444);
+  color: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-badge--info {
+  background: var(--dm-neutral-200, #e5e7eb);
+  color: var(--dm-neutral-900, #111827);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-badge--info {
+    background: var(--dm-neutral-700, #374151);
+    color: var(--dm-neutral-50, #ffffff);
   }
-}
-</script>
-
-<style scoped>
-.dm-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  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: 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: 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: 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, #0072CE);
-  color: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-badge--secondary {
-  background: var(--dm-secondary, #4B0078);
-  color: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-badge--success {
-  background: var(--dm-success, #10b981);
-  color: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-badge--warning {
-  background: var(--dm-warning, #f59e0b);
-  color: var(--dm-neutral-900, #111827);
-}
-
-.dm-badge--error {
-  background: var(--dm-error, #ef4444);
-  color: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-badge--info {
-  background: var(--dm-neutral-200, #e5e7eb);
-  color: var(--dm-neutral-900, #111827);
-}
-
-@media (prefers-color-scheme: dark) {
-  .dm-badge--info {
-    background: var(--dm-neutral-700, #374151);
-    color: var(--dm-neutral-50, #ffffff);
-  }
-}
-</style>
+[data-theme="dark"] .dm-badge--info {
+background: var(--dm-neutral-700, #374151);
+color: var(--dm-neutral-50, #ffffff);
+}
+}
+</style>