@datametria/vue-components 2.4.0 → 2.4.2

package/src/components/DatametriaButton.vue

@@ -1,195 +1,196 @@
-<template>
-  <button
-    :class="buttonClasses"
-    :disabled="disabled || loading"
-    :type="type"
-    :aria-busy="loading"
-    :aria-disabled="disabled"
-    @click="$emit('click', $event)"
-  >
-    <span v-if="loading" class="spinner" role="status" aria-label="Carregando"></span>
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { ButtonVariant, ButtonSize } from '../types'
-
-interface Props {
-  variant?: ButtonVariant
-  size?: ButtonSize
-  disabled?: boolean
-  loading?: boolean
-  fullWidth?: boolean
-  type?: 'button' | 'submit' | 'reset'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: ButtonVariant.PRIMARY,
-  size: ButtonSize.MD,
-  disabled: false,
-  loading: false,
-  fullWidth: false,
-  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]
-}>()
-
-const buttonClasses = computed(() => {
-  return [
-    'datametria-button',
-    `datametria-button--${props.variant}`,
-    `datametria-button--${props.size}`,
-    {
-      'datametria-button--full-width': props.fullWidth,
-      'datametria-button--loading': props.loading,
-      'datametria-button--disabled': props.disabled
-    }
-  ]
-})
-</script>
-
-<style scoped>
-.datametria-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  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);
-  touch-action: manipulation;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.datametria-button--primary {
-  background: var(--dm-primary, #0072CE);
-  color: white;
-}
-
-.datametria-button--primary:hover:not(:disabled) {
-  filter: brightness(0.9);
-}
-
-.datametria-button--primary:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-button--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 color-mix(in srgb, var(--dm-secondary, #4B0078) 20%, transparent);
-}
-
-.datametria-button--outline {
-  background: transparent;
-  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: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
-}
-
-.datametria-button--ghost {
-  background: transparent;
-  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, 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, 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, 1rem) calc(var(--dm-space-4, 1rem) * 2);
-  font-size: var(--dm-text-lg, 1.125rem);
-  min-height: 3rem;
-}
-
-@media (max-width: 640px) {
-  .datametria-button--sm { min-height: 2.25rem; }
-  .datametria-button--md { min-height: 2.75rem; }
-  .datametria-button--lg { min-height: 3.25rem; }
-}
-
-.datametria-button--full-width {
-  width: 100%;
-}
-
-.datametria-button--disabled,
-.datametria-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.spinner {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-  margin-right: 0.5rem;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Dark Mode Support - Hybrid Approach */
-
-/* Fallback automático (sem JS) */
-@media (prefers-color-scheme: dark) {
-  .buttonClasses {
-    background: var(--dm-bg-color-dark, #1e1e1e);
-    color: var(--dm-text-primary-dark, #e0e0e0);
-    border-color: var(--dm-border-color-dark, #404040);
-  }
-}
-
-/* Controle manual via useTheme() */
-[data-theme="dark"] .buttonClasses {
-  background: var(--dm-bg-color-dark, #1e1e1e);
-  color: var(--dm-text-primary-dark, #e0e0e0);
-  border-color: var(--dm-border-color-dark, #404040);
-}
-</style>
+<template>
+  <button
+    :class="buttonClasses"
+    :disabled="disabled || loading"
+    :type="type"
+    :aria-busy="loading"
+    :aria-disabled="disabled"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="spinner" role="status" aria-label="Carregando"></span>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+import { ButtonVariant, ButtonSize } from '../types'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  fullWidth?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: ButtonVariant.PRIMARY,
+  size: ButtonSize.MD,
+  disabled: false,
+  loading: false,
+  fullWidth: false,
+  type: 'button'
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const { trackEvent } = useAnalytics()
+
+const handleClick = (event: MouseEvent) => {
+  trackEvent('button_click', {
+    component: 'DatametriaButton',
+    variant: props.variant,
+    size: props.size
+  })
+  emit('click', event)
+}
+
+const buttonClasses = computed(() => {
+  return [
+    'datametria-button',
+    `datametria-button--${props.variant}`,
+    `datametria-button--${props.size}`,
+    {
+      'datametria-button--full-width': props.fullWidth,
+      'datametria-button--loading': props.loading,
+      'datametria-button--disabled': props.disabled
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.datametria-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-family: -apple-system, sans-serif;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-button--primary {
+  background: var(--color-primary, #0072CE);
+  color: white;
+}
+
+.datametria-button--primary:hover:not(:disabled) {
+  filter: brightness(0.9);
+}
+
+.datametria-button--primary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(0, 114, 206, 0.2));
+}
+
+.datametria-button--secondary {
+  background: var(--color-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 var(--color-primary-alpha, rgba(75, 0, 120, 0.2));
+}
+
+.datametria-button--outline {
+  background: transparent;
+  border-color: var(--color-primary, #0072CE);
+  color: var(--color-primary, #0072CE);
+}
+
+.datametria-button--outline:hover:not(:disabled) {
+  background: var(--color-primary-alpha, rgba(0, 114, 206, 0.1));
+}
+
+.datametria-button--outline:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(0, 114, 206, 0.2));
+}
+
+.datametria-button--ghost {
+  background: transparent;
+  color: var(--color-primary, #0072CE);
+}
+
+.datametria-button--ghost:hover:not(:disabled) {
+  background: var(--color-background-muted, #f3f4f6);
+}
+
+.datametria-button--xs {
+  padding: 2px 6px;
+  font-size: 11px;
+  min-height: 1.75rem;
+}
+
+.datametria-button--sm {
+  padding: 4px 8px;
+  font-size: 12px;
+  min-height: 2rem;
+}
+
+.datametria-button--md {
+  padding: 8px 12px;
+  font-size: 14px;
+  min-height: 2.5rem;
+}
+
+.datametria-button--lg {
+  padding: 12px 16px;
+  font-size: 16px;
+  min-height: 3rem;
+}
+
+.datametria-button--xl {
+  padding: 16px 20px;
+  font-size: 18px;
+  min-height: 3.5rem;
+}
+
+@media (max-width: 640px) {
+  .datametria-button--xs { min-height: 2rem; }
+  .datametria-button--sm { min-height: 2.25rem; }
+  .datametria-button--md { min-height: 2.75rem; }
+  .datametria-button--lg { min-height: 3.25rem; }
+  .datametria-button--xl { min-height: 3.75rem; }
+}
+
+.datametria-button--full-width {
+  width: 100%;
+}
+
+.datametria-button--disabled,
+.datametria-button:disabled {
+  background: var(--color-background-muted, #f3f4f6);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>