@datametria/vue-components 2.4.1 → 2.4.2

package/src/components/DatametriaInput.vue

@@ -1,316 +1,342 @@
-<template>
-  <div class="datametria-input" :class="inputWrapperClasses">
-    <!-- Label -->
-    <label v-if="label" class="datametria-input__label">
-      {{ label }}
-      <span v-if="required" class="datametria-input__required">*</span>
-    </label>
-
-    <div v-if="$slots.prepend" class="datametria-input__prepend">
-      <slot name="prepend" />
-    </div>
-
-    <div class="datametria-input__inner">
-      <span v-if="$slots.prefix || prefixIcon" class="datametria-input__prefix">
-        <slot name="prefix">
-          <span v-if="prefixIcon">{{ prefixIcon }}</span>
-        </slot>
-      </span>
-
-      <input
-        ref="inputRef"
-        v-model="inputValue"
-        :type="type"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :readonly="readonly"
-        :maxlength="maxlength"
-        :class="inputClasses"
-        @input="handleInput"
-        @change="handleChange"
-        @focus="handleFocus"
-        @blur="handleBlur"
-      />
-
-      <span v-if="showClear || $slots.suffix || suffixIcon" class="datametria-input__suffix">
-        <button
-          v-if="showClear"
-          class="datametria-input__clear"
-          @click="handleClear"
-          type="button"
-        >
-          ×
-        </button>
-        <slot name="suffix">
-          <span v-if="suffixIcon">{{ suffixIcon }}</span>
-        </slot>
-      </span>
-    </div>
-
-    <div v-if="$slots.append" class="datametria-input__append">
-      <slot name="append" />
-    </div>
-
-    <!-- Error Message -->
-    <div v-if="errorMessage" class="datametria-input__error">
-      {{ errorMessage }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
-/**
- * DatametriaInput - Input de texto com validação e slots
- * 
- * @component
- * @example
- * <DatametriaInput v-model="value" placeholder="Digite algo" />
- */
-
-interface Props {
-  /** Valor do input */
-  modelValue?: string | number
-  /** Label do input */
-  label?: string
-  /** Campo obrigatório */
-  required?: boolean
-  /** Mensagem de erro */
-  errorMessage?: string
-  /** Tipo do input */
-  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url'
-  /** Placeholder */
-  placeholder?: string
-  /** Input desabilitado */
-  disabled?: boolean
-  /** Input somente leitura */
-  readonly?: boolean
-  /** Botão de limpar */
-  clearable?: boolean
-  /** Comprimento máximo */
-  maxlength?: number
-  /** Ícone prefixo */
-  prefixIcon?: string
-  /** Ícone sufixo */
-  suffixIcon?: string
-  /** Tamanho */
-  size?: 'small' | 'default' | 'large'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
-  type: 'text',
-  placeholder: '',
-  disabled: false,
-  readonly: false,
-  clearable: false,
-  required: false,
-  size: 'default'
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-  'input': [value: string | number]
-  'change': [value: string | number]
-  'focus': [event: FocusEvent]
-  'blur': [event: FocusEvent]
-  'clear': []
-}>()
-
-const inputRef = ref<HTMLInputElement>()
-const isFocused = ref(false)
-
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value)
-})
-
-const showClear = computed(() => {
-  return props.clearable && !props.disabled && !props.readonly && inputValue.value
-})
-
-const inputWrapperClasses = computed(() => ({
-  'datametria-input--disabled': props.disabled,
-  'datametria-input--focused': isFocused.value,
-  [`datametria-input--${props.size}`]: props.size !== 'default'
-}))
-
-const inputClasses = computed(() => ({
-  'datametria-input__field': true,
-  'datametria-input__field--error': !!props.errorMessage
-}))
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  emit('input', target.value)
-}
-
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  emit('change', target.value)
-}
-
-const handleFocus = (event: FocusEvent) => {
-  isFocused.value = true
-  emit('focus', event)
-}
-
-const handleBlur = (event: FocusEvent) => {
-  isFocused.value = false
-  emit('blur', event)
-}
-
-const handleClear = () => {
-  emit('update:modelValue', '')
-  emit('clear')
-  inputRef.value?.focus()
-}
-
-defineExpose({
-  focus: () => inputRef.value?.focus(),
-  blur: () => inputRef.value?.blur()
-})
-</script>
-
-<style scoped>
-.datametria-input__label {
-  display: block;
-  margin-bottom: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--dm-text-primary, #1f2937);
-}
-
-.datametria-input__required {
-  color: var(--dm-error, #ef4444);
-  margin-left: 2px;
-}
-
-.datametria-input__error {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--dm-error, #ef4444);
-}
-
-.datametria-input__field--error {
-  border-color: var(--dm-error, #ef4444) !important;
-}
-
-.datametria-input {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
-  font-size: 14px;
-}
-
-.datametria-input__inner {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  background: var(--dm-bg-color, #ffffff);
-  border: 1px solid var(--dm-border-color, #d1d5db);
-  border-radius: 6px;
-  transition: all 0.2s;
-}
-
-.datametria-input__inner:hover {
-  border-color: var(--dm-primary, #3b82f6);
-}
-
-.datametria-input--focused .datametria-input__inner {
-  border-color: var(--dm-primary, #3b82f6);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.datametria-input--disabled .datametria-input__inner {
-  background: var(--dm-bg-disabled, #f3f4f6);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.datametria-input__field {
-  flex: 1;
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--dm-text-primary, #1f2937);
-  font-size: inherit;
-}
-
-.datametria-input__field:disabled {
-  cursor: not-allowed;
-}
-
-.datametria-input__prefix,
-.datametria-input__suffix {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 8px;
-  color: var(--dm-text-secondary, #6b7280);
-}
-
-.datametria-input__clear {
-  background: none;
-  border: none;
-  font-size: 18px;
-  line-height: 1;
-  color: var(--dm-text-secondary, #6b7280);
-  cursor: pointer;
-  padding: 0 4px;
-  transition: color 0.2s;
-}
-
-.datametria-input__clear:hover {
-  color: var(--dm-text-primary, #1f2937);
-}
-
-.datametria-input__prepend,
-.datametria-input__append {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 12px;
-  background: var(--dm-bg-secondary, #f9fafb);
-  border: 1px solid var(--dm-border-color, #d1d5db);
-  white-space: nowrap;
-}
-
-.datametria-input__prepend {
-  border-right: none;
-  border-radius: 6px 0 0 6px;
-}
-
-.datametria-input__append {
-  border-left: none;
-  border-radius: 0 6px 6px 0;
-}
-
-.datametria-input--small .datametria-input__field {
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-.datametria-input--large .datametria-input__field {
-  padding: 12px 16px;
-  font-size: 16px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .datametria-input__inner {
-    background: var(--color-background, #1f2937);
-    border-color: var(--color-border, #374151);
-  }
-
-[data-theme="dark"] .datametria-input__inner {
-background: var(--color-background, #1f2937);
-border-color: var(--color-border, #374151);
-}
-
-  .datametria-input__field {
-    color: var(--color-text-primary, #f9fafb);
-  }
-}
-</style>
+<template>
+  <div class="datametria-input" :class="inputWrapperClasses">
+    <label v-if="label" :for="inputId" class="datametria-input__label">
+      {{ label }}
+      <span v-if="required" class="datametria-input__required">*</span>
+    </label>
+
+    <div v-if="$slots.prepend" class="datametria-input__prepend">
+      <slot name="prepend" />
+    </div>
+
+    <div class="datametria-input__inner">
+      <span v-if="$slots.prefix || prefixIcon" class="datametria-input__prefix">
+        <slot name="prefix">
+          <span v-if="prefixIcon">{{ prefixIcon }}</span>
+        </slot>
+      </span>
+
+      <input
+        :id="inputId"
+        ref="inputRef"
+        v-model="inputValue"
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :maxlength="maxlength"
+        :aria-label="label || placeholder"
+        :aria-required="required"
+        :aria-invalid="!!errorMessage"
+        :aria-describedby="errorMessage ? `${inputId}-error` : undefined"
+        :class="inputClasses"
+        @input="handleInput"
+        @change="handleChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+
+      <span v-if="showClear || $slots.suffix || suffixIcon" class="datametria-input__suffix">
+        <button
+          v-if="showClear"
+          class="datametria-input__clear"
+          type="button"
+          aria-label="Limpar"
+          @click="handleClear"
+        >
+          ×
+        </button>
+        <slot name="suffix">
+          <span v-if="suffixIcon">{{ suffixIcon }}</span>
+        </slot>
+      </span>
+    </div>
+
+    <div v-if="$slots.append" class="datametria-input__append">
+      <slot name="append" />
+    </div>
+
+    <div
+      v-if="errorMessage"
+      :id="`${inputId}-error`"
+      role="alert"
+      aria-live="polite"
+      class="datametria-input__error"
+    >
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useAnalytics } from '@/composables/useAnalytics'
+
+interface Props {
+  modelValue?: string | number
+  label?: string
+  required?: boolean
+  errorMessage?: string
+  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url'
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  clearable?: boolean
+  maxlength?: number
+  prefixIcon?: string
+  suffixIcon?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  type: 'text',
+  placeholder: '',
+  disabled: false,
+  readonly: false,
+  clearable: false,
+  required: false,
+  size: 'md'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+  'input': [value: string | number]
+  'change': [value: string | number]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'clear': []
+}>()
+
+const { trackEvent } = useAnalytics()
+const inputRef = ref<HTMLInputElement>()
+const isFocused = ref(false)
+const inputId = `datametria-input-${Math.random().toString(36).substr(2, 9)}`
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && inputValue.value
+})
+
+const inputWrapperClasses = computed(() => ({
+  'datametria-input--disabled': props.disabled,
+  'datametria-input--focused': isFocused.value,
+  'datametria-input--error': !!props.errorMessage,
+  [`datametria-input--${props.size}`]: true
+}))
+
+const inputClasses = computed(() => ({
+  'datametria-input__field': true
+}))
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('input', target.value)
+}
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  trackEvent('input_change', {
+    component: 'DatametriaInput',
+    type: props.type,
+    hasValue: !!target.value
+  })
+  emit('change', target.value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  isFocused.value = true
+  trackEvent('input_focus', {
+    component: 'DatametriaInput',
+    type: props.type,
+    size: props.size
+  })
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const handleClear = () => {
+  trackEvent('input_clear', {
+    component: 'DatametriaInput',
+    type: props.type
+  })
+  emit('update:modelValue', '')
+  emit('clear')
+  inputRef.value?.focus()
+}
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  blur: () => inputRef.value?.blur()
+})
+</script>
+
+<style scoped>
+.datametria-input {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.datametria-input__label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-input__required {
+  color: var(--color-error, #ef4444);
+  margin-left: 2px;
+}
+
+.datametria-input__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.datametria-input__inner:hover:not(.datametria-input--disabled .datametria-input__inner) {
+  border-color: var(--color-primary, #3b82f6);
+}
+
+.datametria-input--focused .datametria-input__inner {
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+}
+
+.datametria-input--error .datametria-input__inner {
+  border-color: var(--color-error, #ef4444);
+}
+
+.datametria-input--disabled .datametria-input__inner {
+  background: var(--color-background-muted, #f3f4f6);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.datametria-input__field {
+  flex: 1;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-text-primary, #1f2937);
+  font-size: 14px;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-input__field:disabled {
+  cursor: not-allowed;
+}
+
+.datametria-input__field::placeholder {
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-input__prefix,
+.datametria-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-input__clear {
+  background: none;
+  border: none;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--color-text-secondary, #6b7280);
+  cursor: pointer;
+  padding: 0 4px;
+  transition: color 0.2s;
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.datametria-input__clear:hover {
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-input__prepend,
+.datametria-input__append {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  background: var(--color-background-alt, #f9fafb);
+  border: 1px solid var(--color-border, #d1d5db);
+  white-space: nowrap;
+}
+
+.datametria-input__prepend {
+  border-right: none;
+  border-radius: 6px 0 0 6px;
+}
+
+.datametria-input__append {
+  border-left: none;
+  border-radius: 0 6px 6px 0;
+}
+
+.datametria-input__error {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-error, #ef4444);
+}
+
+/* Tamanhos */
+.datametria-input--xs .datametria-input__field {
+  padding: 2px 6px;
+  font-size: 11px;
+  min-height: 1.75rem;
+}
+
+.datametria-input--sm .datametria-input__field {
+  padding: 4px 8px;
+  font-size: 12px;
+  min-height: 2rem;
+}
+
+.datametria-input--md .datametria-input__field {
+  padding: 8px 12px;
+  font-size: 14px;
+  min-height: 2.5rem;
+}
+
+.datametria-input--lg .datametria-input__field {
+  padding: 12px 16px;
+  font-size: 16px;
+  min-height: 3rem;
+}
+
+.datametria-input--xl .datametria-input__field {
+  padding: 16px 20px;
+  font-size: 18px;
+  min-height: 3.5rem;
+}
+
+/* Responsividade mobile */
+@media (max-width: 640px) {
+  .datametria-input--xs .datametria-input__field { min-height: 2rem; }
+  .datametria-input--sm .datametria-input__field { min-height: 2.25rem; }
+  .datametria-input--md .datametria-input__field { min-height: 2.75rem; }
+  .datametria-input--lg .datametria-input__field { min-height: 3.25rem; }
+  .datametria-input--xl .datametria-input__field { min-height: 3.75rem; }
+}
+</style>