@datametria/vue-components 2.4.1 → 2.4.2

package/src/components/DatametriaTextarea.vue

@@ -1,217 +1,289 @@
-<template>
-  <div class="datametria-textarea" :class="textareaClasses">
-    <textarea
-      ref="textareaRef"
-      v-model="currentValue"
-      class="datametria-textarea__inner"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      :rows="computedRows"
-      :maxlength="maxlength"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-    />
-    <div v-if="showWordLimit && maxlength" class="datametria-textarea__count">
-      {{ currentValue.length }} / {{ maxlength }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted } from 'vue'
-
-interface Props {
-  modelValue?: string
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  rows?: number
-  maxlength?: number
-  showWordLimit?: boolean
-  autosize?: boolean | { minRows?: number; maxRows?: number }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  placeholder: '',
-  disabled: false,
-  readonly: false,
-  rows: 3,
-  showWordLimit: false,
-  autosize: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  input: [value: string]
-  focus: [event: FocusEvent]
-  blur: [event: FocusEvent]
-}>()
-
-const textareaRef = ref<HTMLTextAreaElement>()
-const currentValue = ref(props.modelValue)
-const isFocused = ref(false)
-
-const textareaClasses = computed(() => ({
-  'datametria-textarea--disabled': props.disabled,
-  'datametria-textarea--focused': isFocused.value
-}))
-
-const computedRows = computed(() => {
-  if (props.autosize) return undefined
-  return props.rows
-})
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLTextAreaElement
-  currentValue.value = target.value
-  emit('update:modelValue', target.value)
-  emit('input', target.value)
-  
-  if (props.autosize) {
-    nextTick(() => resizeTextarea())
-  }
-}
-
-const handleFocus = (event: FocusEvent) => {
-  isFocused.value = true
-  emit('focus', event)
-}
-
-const handleBlur = (event: FocusEvent) => {
-  isFocused.value = false
-  emit('blur', event)
-}
-
-const resizeTextarea = () => {
-  if (!textareaRef.value || !props.autosize) return
-
-  const textarea = textareaRef.value
-  textarea.style.height = 'auto'
-  
-  let minHeight = 0
-  let maxHeight = Infinity
-
-  if (typeof props.autosize === 'object') {
-    if (props.autosize.minRows) {
-      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
-      minHeight = props.autosize.minRows * lineHeight
-    }
-    if (props.autosize.maxRows) {
-      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
-      maxHeight = props.autosize.maxRows * lineHeight
-    }
-  }
-
-  const scrollHeight = textarea.scrollHeight
-  const height = Math.max(minHeight, Math.min(maxHeight, scrollHeight))
-  textarea.style.height = `${height}px`
-}
-
-watch(() => props.modelValue, (newValue) => {
-  if (newValue !== currentValue.value) {
-    currentValue.value = newValue
-    if (props.autosize) {
-      nextTick(() => resizeTextarea())
-    }
-  }
-})
-
-onMounted(() => {
-  if (props.autosize) {
-    nextTick(() => resizeTextarea())
-  }
-})
-
-defineExpose({
-  focus: () => textareaRef.value?.focus(),
-  blur: () => textareaRef.value?.blur()
-})
-</script>
-
-<style scoped>
-.datametria-textarea {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  vertical-align: bottom;
-  font-size: 14px;
-}
-
-.datametria-textarea__inner {
-  display: block;
-  resize: vertical;
-  padding: 8px 12px;
-  line-height: 1.5;
-  box-sizing: border-box;
-  width: 100%;
-  font-size: inherit;
-  font-family: inherit;
-  color: var(--dm-text-primary, #303133);
-  background-color: var(--dm-bg-color, #ffffff);
-  border: 1px solid var(--dm-border-color, #dcdfe6);
-  border-radius: 4px;
-  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-.datametria-textarea__inner:hover {
-  border-color: var(--dm-border-color, #c0c4cc);
-}
-
-.datametria-textarea__inner:focus {
-  outline: none;
-  border-color: var(--dm-primary, #0072ce);
-}
-
-.datametria-textarea__inner::placeholder {
-  color: var(--dm-text-secondary, #a8abb2);
-}
-
-.datametria-textarea__inner:disabled {
-  background-color: var(--dm-bg-disabled, #f5f7fa);
-  border-color: var(--dm-border-color, #e4e7ed);
-  color: var(--dm-text-secondary, #c0c4cc);
-  cursor: not-allowed;
-}
-
-.datametria-textarea--disabled .datametria-textarea__inner {
-  background-color: var(--dm-bg-disabled, #f5f7fa);
-  border-color: var(--dm-border-color, #e4e7ed);
-  color: var(--dm-text-secondary, #c0c4cc);
-  cursor: not-allowed;
-}
-
-.datametria-textarea__count {
-  position: absolute;
-  bottom: 8px;
-  right: 12px;
-  font-size: 12px;
-  color: var(--dm-text-secondary, #909399);
-  background-color: var(--dm-bg-color, #ffffff);
-  padding: 0 4px;
-}
-
-.datametria-textarea--focused .datametria-textarea__inner {
-  border-color: var(--dm-primary, #0072ce);
-}
-
-/* Dark Mode Support - Hybrid Approach */
-
-/* Fallback automático (sem JS) */
-@media (prefers-color-scheme: dark) {
-  .datametria-textarea {
-    background: var(--dm-bg-color-dark, #1e1e1e);
-    color: var(--dm-text-primary-dark, #e0e0e0);
-    border-color: var(--dm-border-color-dark, #404040);
+<template>
+  <div class="datametria-textarea" :class="textareaClasses">
+    <label v-if="label" :for="textareaId" class="datametria-textarea__label">
+      {{ label }}
+      <span v-if="required" class="datametria-textarea__required">*</span>
+    </label>
+
+    <textarea
+      :id="textareaId"
+      ref="textareaRef"
+      v-model="currentValue"
+      class="datametria-textarea__inner"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :rows="computedRows"
+      :maxlength="maxlength"
+      :aria-label="label || placeholder"
+      :aria-required="required"
+      :aria-invalid="!!errorMessage"
+      :aria-describedby="errorMessage ? `${textareaId}-error` : undefined"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+
+    <div v-if="showWordLimit && maxlength" class="datametria-textarea__count">
+      {{ currentValue.length }} / {{ maxlength }}
+    </div>
+
+    <div
+      v-if="errorMessage"
+      :id="`${textareaId}-error`"
+      role="alert"
+      aria-live="polite"
+      class="datametria-textarea__error"
+    >
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  rows?: number
+  maxlength?: number
+  showWordLimit?: boolean
+  autosize?: boolean | { minRows?: number; maxRows?: number }
+  label?: string
+  required?: boolean
+  errorMessage?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '',
+  disabled: false,
+  readonly: false,
+  rows: 3,
+  showWordLimit: false,
+  autosize: false,
+  required: false,
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  input: [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}>()
+
+const { trackEvent } = useAnalytics()
+const textareaRef = ref<HTMLTextAreaElement>()
+const currentValue = ref(props.modelValue)
+const isFocused = ref(false)
+const textareaId = `datametria-textarea-${Math.random().toString(36).substr(2, 9)}`
+
+const textareaClasses = computed(() => ({
+  'datametria-textarea--disabled': props.disabled,
+  'datametria-textarea--focused': isFocused.value,
+  'datametria-textarea--error': !!props.errorMessage,
+  [`datametria-textarea--${props.size}`]: true
+}))
+
+const computedRows = computed(() => {
+  if (props.autosize) return undefined
+  return props.rows
+})
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLTextAreaElement
+  currentValue.value = target.value
+  emit('update:modelValue', target.value)
+  emit('input', target.value)
+  
+  if (props.autosize) {
+    nextTick(() => resizeTextarea())
+  }
+}
+
+const handleFocus = (event: FocusEvent) => {
+  isFocused.value = true
+  trackEvent('textarea_focus', {
+    component: 'DatametriaTextarea',
+    size: props.size
+  })
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const resizeTextarea = () => {
+  if (!textareaRef.value || !props.autosize) return
+
+  const textarea = textareaRef.value
+  textarea.style.height = 'auto'
+  
+  let minHeight = 0
+  let maxHeight = Infinity
+
+  if (typeof props.autosize === 'object') {
+    if (props.autosize.minRows) {
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
+      minHeight = props.autosize.minRows * lineHeight
+    }
+    if (props.autosize.maxRows) {
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
+      maxHeight = props.autosize.maxRows * lineHeight
+    }
   }
+
+  const scrollHeight = textarea.scrollHeight
+  const height = Math.max(minHeight, Math.min(maxHeight, scrollHeight))
+  textarea.style.height = `${height}px`
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== currentValue.value) {
+    currentValue.value = newValue
+    if (props.autosize) {
+      nextTick(() => resizeTextarea())
+    }
+  }
+})
+
+onMounted(() => {
+  if (props.autosize) {
+    nextTick(() => resizeTextarea())
+  }
+})
+
+defineExpose({
+  focus: () => textareaRef.value?.focus(),
+  blur: () => textareaRef.value?.blur()
+})
+</script>
+
+<style scoped>
+.datametria-textarea {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.datametria-textarea__label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-textarea__required {
+  color: var(--color-error, #ef4444);
+  margin-left: 2px;
+}
+
+.datametria-textarea__inner {
+  display: block;
+  resize: vertical;
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 14px;
+  font-family: inherit;
+  line-height: 1.5;
+  color: var(--color-text-primary, #1f2937);
+  background-color: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 6px;
+  transition: all 0.2s;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-textarea__inner:hover:not(:disabled) {
+  border-color: var(--color-primary, #3b82f6);
+}
+
+.datametria-textarea__inner:focus {
+  outline: none;
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.datametria-textarea__inner::placeholder {
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-textarea__inner:disabled {
+  background-color: var(--color-background-muted, #f3f4f6);
+  border-color: var(--color-border, #d1d5db);
+  color: var(--color-text-secondary, #6b7280);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.datametria-textarea--error .datametria-textarea__inner {
+  border-color: var(--color-error, #ef4444);
+}
+
+.datametria-textarea__count {
+  position: absolute;
+  bottom: 8px;
+  right: 12px;
+  font-size: 12px;
+  color: var(--color-text-secondary, #6b7280);
+  background-color: var(--color-background, #ffffff);
+  padding: 0 4px;
+}
+
+.datametria-textarea__error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+}
+
+/* Tamanhos */
+.datametria-textarea--xs .datametria-textarea__inner {
+  padding: 2px 6px;
+  font-size: 11px;
+  min-height: 2rem;
+}
+
+.datametria-textarea--sm .datametria-textarea__inner {
+  padding: 4px 8px;
+  font-size: 12px;
+  min-height: 2.25rem;
+}
+
+.datametria-textarea--md .datametria-textarea__inner {
+  padding: 8px 12px;
+  font-size: 14px;
+  min-height: 2.75rem;
+}
+
+.datametria-textarea--lg .datametria-textarea__inner {
+  padding: 12px 16px;
+  font-size: 16px;
+  min-height: 3.25rem;
+}
+
+.datametria-textarea--xl .datametria-textarea__inner {
+  padding: 16px 20px;
+  font-size: 18px;
+  min-height: 3.75rem;
 }
 
-/* Controle manual via useTheme() */
-[data-theme="dark"] .datametria-textarea {
-  background: var(--dm-bg-color-dark, #1e1e1e);
-  color: var(--dm-text-primary-dark, #e0e0e0);
-  border-color: var(--dm-border-color-dark, #404040);
+/* Responsividade mobile */
+@media (max-width: 640px) {
+  .datametria-textarea--xs .datametria-textarea__inner { min-height: 2.5rem; }
+  .datametria-textarea--sm .datametria-textarea__inner { min-height: 2.75rem; }
+  .datametria-textarea--md .datametria-textarea__inner { min-height: 3.25rem; }
+  .datametria-textarea--lg .datametria-textarea__inner { min-height: 3.75rem; }
+  .datametria-textarea--xl .datametria-textarea__inner { min-height: 4.25rem; }
 }
-</style>
+</style>

package/src/composables/useAnalytics.ts

@@ -0,0 +1,70 @@
+/**
+ * Firebase Analytics Composable
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 22/12/2025
+ */
+
+import { getAnalytics, logEvent, type Analytics } from 'firebase/analytics'
+
+let analytics: Analytics | null = null
+
+export function useAnalytics() {
+  /**
+   * Inicializa o Firebase Analytics (lazy loading)
+   */
+  const initAnalytics = () => {
+    if (!analytics && typeof window !== 'undefined') {
+      try {
+        analytics = getAnalytics()
+      } catch (error) {
+        console.warn('[Analytics] Firebase não configurado:', error)
+      }
+    }
+  }
+
+  /**
+   * Rastreia evento no Firebase Analytics
+   * @param eventName Nome do evento (snake_case)
+   * @param params Parâmetros do evento
+   */
+  const trackEvent = (
+    eventName: string,
+    params?: Record<string, any>
+  ) => {
+    // Apenas em produção
+    if (process.env.NODE_ENV === 'production') {
+      initAnalytics()
+      
+      if (analytics) {
+        // Filtrar dados sensíveis
+        const sanitizedParams = sanitizeParams(params)
+        logEvent(analytics, eventName, sanitizedParams)
+      }
+    } else {
+      // Log em desenvolvimento
+      console.log('[Analytics]', eventName, params)
+    }
+  }
+
+  /**
+   * Remove dados sensíveis dos parâmetros
+   */
+  const sanitizeParams = (params?: Record<string, any>) => {
+    if (!params) return undefined
+
+    const sensitiveKeys = ['password', 'token', 'secret', 'key', 'email', 'cpf', 'cnpj']
+    const sanitized = { ...params }
+
+    Object.keys(sanitized).forEach(key => {
+      if (sensitiveKeys.some(sensitive => key.toLowerCase().includes(sensitive))) {
+        delete sanitized[key]
+      }
+    })
+
+    return sanitized
+  }
+
+  return {
+    trackEvent
+  }
+}

package/src/types/analytics.ts

@@ -0,0 +1,59 @@
+/**
+ * Component Size Type (5 sizes)
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 22/12/2025
+ */
+
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export const ComponentSizeEnum = {
+  XS: 'xs' as ComponentSize,
+  SM: 'sm' as ComponentSize,
+  MD: 'md' as ComponentSize,
+  LG: 'lg' as ComponentSize,
+  XL: 'xl' as ComponentSize
+}
+
+/**
+ * Analytics Event Types
+ */
+export interface AnalyticsEvent {
+  component: string
+  [key: string]: any
+}
+
+export interface ButtonClickEvent extends AnalyticsEvent {
+  variant?: string
+  size?: ComponentSize
+}
+
+export interface InputEvent extends AnalyticsEvent {
+  type?: string
+  size?: ComponentSize
+  hasValue?: boolean
+}
+
+export interface ModalEvent extends AnalyticsEvent {
+  title?: string
+  action?: 'open' | 'close' | 'confirm' | 'cancel'
+}
+
+export interface TableEvent extends AnalyticsEvent {
+  column?: string
+  direction?: 'asc' | 'desc'
+  filterType?: string
+  selectedCount?: number
+  page?: number
+  pageSize?: number
+}
+
+export interface TabEvent extends AnalyticsEvent {
+  tabId: string
+  tabLabel?: string
+}
+
+export interface FormEvent extends AnalyticsEvent {
+  formId?: string
+  fieldCount?: number
+  errorCount?: number
+}