@datametria/vue-components 1.2.0 → 2.0.1

package/src/components/DatametriaPasswordInput.vue

@@ -0,0 +1,430 @@
+<template>
+  <div class="datametria-password-input">
+    <label v-if="label" :for="inputId" class="datametria-password-input__label">
+      {{ label }}
+      <span v-if="required" class="datametria-password-input__required">*</span>
+    </label>
+    
+    <div class="datametria-password-input__wrapper">
+      <input
+        :id="inputId"
+        :value="modelValue"
+        :type="showPassword ? 'text' : 'password'"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :required="required"
+        :autocomplete="autocomplete"
+        :class="inputClasses"
+        :aria-invalid="!!errorMessage"
+        :aria-describedby="ariaDescribedby"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keyup="checkCapsLock"
+      />
+      
+      <button
+        type="button"
+        class="datametria-password-input__toggle"
+        :aria-label="showPassword ? 'Ocultar senha' : 'Mostrar senha'"
+        @click="toggleVisibility"
+        tabindex="-1"
+      >
+        <svg v-if="showPassword" class="datametria-password-input__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+        </svg>
+        <svg v-else class="datametria-password-input__icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Caps Lock Warning -->
+    <p v-if="capsLockOn" class="datametria-password-input__warning">
+      ⚠️ Caps Lock está ativado
+    </p>
+
+    <!-- Strength Indicator -->
+    <div v-if="showStrength && modelValue" class="datametria-password-input__strength">
+      <div class="datametria-password-input__strength-bar">
+        <div 
+          :class="strengthBarClasses"
+          :style="{ width: `${strengthPercentage}%` }"
+        ></div>
+      </div>
+      <span :class="strengthTextClasses">{{ strengthText }}</span>
+    </div>
+
+    <!-- Requirements -->
+    <div v-if="showRequirements && isFocused" :id="`${inputId}-requirements`" class="datametria-password-input__requirements">
+      <p class="datametria-password-input__requirements-title">A senha deve conter:</p>
+      <ul class="datametria-password-input__requirements-list">
+        <li :class="{ 'valid': requirements.minLength }">
+          <span class="datametria-password-input__check">{{ requirements.minLength ? '✓' : '○' }}</span>
+          Mínimo {{ minLength }} caracteres
+        </li>
+        <li :class="{ 'valid': requirements.hasUppercase }">
+          <span class="datametria-password-input__check">{{ requirements.hasUppercase ? '✓' : '○' }}</span>
+          Pelo menos 1 letra maiúscula
+        </li>
+        <li :class="{ 'valid': requirements.hasLowercase }">
+          <span class="datametria-password-input__check">{{ requirements.hasLowercase ? '✓' : '○' }}</span>
+          Pelo menos 1 letra minúscula
+        </li>
+        <li :class="{ 'valid': requirements.hasNumber }">
+          <span class="datametria-password-input__check">{{ requirements.hasNumber ? '✓' : '○' }}</span>
+          Pelo menos 1 número
+        </li>
+        <li :class="{ 'valid': requirements.hasSpecial }">
+          <span class="datametria-password-input__check">{{ requirements.hasSpecial ? '✓' : '○' }}</span>
+          Pelo menos 1 caractere especial
+        </li>
+      </ul>
+    </div>
+
+    <!-- Error Message -->
+    <p v-if="errorMessage" :id="`${inputId}-error`" class="datametria-password-input__error">
+      {{ errorMessage }}
+    </p>
+
+    <!-- Help Text -->
+    <p v-if="helpText && !errorMessage" :id="`${inputId}-help`" class="datametria-password-input__help">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  modelValue?: string
+  label?: string
+  placeholder?: string
+  errorMessage?: string
+  helpText?: string
+  disabled?: boolean
+  required?: boolean
+  minLength?: number
+  showStrength?: boolean
+  showRequirements?: boolean
+  autocomplete?: 'current-password' | 'new-password'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false,
+  required: false,
+  minLength: 8,
+  showStrength: true,
+  showRequirements: true,
+  autocomplete: 'current-password'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'strength-change': [strength: number]
+}>()
+
+const inputId = computed(() => `password-${Math.random().toString(36).substr(2, 9)}`)
+const showPassword = ref(false)
+const isFocused = ref(false)
+const capsLockOn = ref(false)
+
+// Requirements validation
+const requirements = computed(() => ({
+  minLength: props.modelValue.length >= props.minLength,
+  hasUppercase: /[A-Z]/.test(props.modelValue),
+  hasLowercase: /[a-z]/.test(props.modelValue),
+  hasNumber: /\d/.test(props.modelValue),
+  hasSpecial: /[!@#$%^&*(),.?":{}|<>]/.test(props.modelValue)
+}))
+
+// Password strength calculation
+const strength = computed(() => {
+  if (!props.modelValue) return 0
+  
+  let score = 0
+  const reqs = requirements.value
+  
+  if (reqs.minLength) score += 20
+  if (reqs.hasUppercase) score += 20
+  if (reqs.hasLowercase) score += 20
+  if (reqs.hasNumber) score += 20
+  if (reqs.hasSpecial) score += 20
+  
+  return score
+})
+
+const strengthPercentage = computed(() => strength.value)
+
+const strengthText = computed(() => {
+  const s = strength.value
+  if (s === 0) return ''
+  if (s <= 40) return 'Fraca'
+  if (s <= 60) return 'Média'
+  if (s <= 80) return 'Boa'
+  return 'Forte'
+})
+
+const strengthBarClasses = computed(() => [
+  'datametria-password-input__strength-fill',
+  {
+    'datametria-password-input__strength-fill--weak': strength.value <= 40,
+    'datametria-password-input__strength-fill--medium': strength.value > 40 && strength.value <= 60,
+    'datametria-password-input__strength-fill--good': strength.value > 60 && strength.value <= 80,
+    'datametria-password-input__strength-fill--strong': strength.value > 80
+  }
+])
+
+const strengthTextClasses = computed(() => [
+  'datametria-password-input__strength-text',
+  {
+    'datametria-password-input__strength-text--weak': strength.value <= 40,
+    'datametria-password-input__strength-text--medium': strength.value > 40 && strength.value <= 60,
+    'datametria-password-input__strength-text--good': strength.value > 60 && strength.value <= 80,
+    'datametria-password-input__strength-text--strong': strength.value > 80
+  }
+])
+
+const inputClasses = computed(() => [
+  'datametria-password-input__field',
+  {
+    'datametria-password-input__field--error': props.errorMessage,
+    'datametria-password-input__field--disabled': props.disabled
+  }
+])
+
+const ariaDescribedby = computed(() => {
+  const ids = []
+  if (props.showRequirements && isFocused.value) ids.push(`${inputId.value}-requirements`)
+  if (props.errorMessage) ids.push(`${inputId.value}-error`)
+  if (props.helpText && !props.errorMessage) ids.push(`${inputId.value}-help`)
+  return ids.length > 0 ? ids.join(' ') : undefined
+})
+
+const handleInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value
+  emit('update:modelValue', value)
+}
+
+const handleFocus = () => {
+  isFocused.value = true
+}
+
+const handleBlur = () => {
+  isFocused.value = false
+}
+
+const toggleVisibility = () => {
+  showPassword.value = !showPassword.value
+}
+
+const checkCapsLock = (event: KeyboardEvent) => {
+  capsLockOn.value = event.getModifierState('CapsLock')
+}
+
+// Watch strength changes and emit
+watch(strength, (newStrength) => {
+  if (props.modelValue) {
+    emit('strength-change', newStrength)
+  }
+})
+</script>
+
+<style scoped>
+.datametria-password-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-password-input__label {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  color: var(--dm-neutral-700, #374151);
+}
+
+.datametria-password-input__required {
+  color: var(--dm-error, #ef4444);
+}
+
+.datametria-password-input__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.datametria-password-input__field {
+  width: 100%;
+  padding: var(--dm-spacing-3, 0.75rem);
+  padding-right: var(--dm-spacing-12, 3rem);
+  border: 1px solid var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-base, 1rem);
+  transition: all var(--dm-transition-base, 0.2s);
+}
+
+.datametria-password-input__field:focus {
+  outline: none;
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
+}
+
+.datametria-password-input__field--error {
+  border-color: var(--dm-error, #ef4444);
+}
+
+.datametria-password-input__field--error:focus {
+  border-color: var(--dm-error, #ef4444);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-error, #ef4444) 10%, transparent);
+}
+
+.datametria-password-input__field--disabled {
+  background: var(--dm-neutral-100, #f3f4f6);
+  cursor: not-allowed;
+}
+
+.datametria-password-input__toggle {
+  position: absolute;
+  right: var(--dm-spacing-3, 0.75rem);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--dm-spacing-1, 0.25rem);
+  color: var(--dm-neutral-500, #6b7280);
+  transition: color var(--dm-transition-base, 0.2s);
+}
+
+.datametria-password-input__toggle:hover {
+  color: var(--dm-neutral-700, #374151);
+}
+
+.datametria-password-input__toggle:focus {
+  outline: 2px solid var(--dm-primary, #0072CE);
+  outline-offset: 2px;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+}
+
+.datametria-password-input__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.datametria-password-input__warning {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-warning, #f59e0b);
+  margin: 0;
+}
+
+.datametria-password-input__strength {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-3, 0.75rem);
+}
+
+.datametria-password-input__strength-bar {
+  flex: 1;
+  height: var(--dm-spacing-2, 0.5rem);
+  background: var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  overflow: hidden;
+}
+
+.datametria-password-input__strength-fill {
+  height: 100%;
+  transition: width var(--dm-transition-slow, 0.3s) ease, background-color var(--dm-transition-slow, 0.3s) ease;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+}
+
+.datametria-password-input__strength-fill--weak {
+  background: var(--dm-error, #ef4444);
+}
+
+.datametria-password-input__strength-fill--medium {
+  background: var(--dm-warning, #f59e0b);
+}
+
+.datametria-password-input__strength-fill--good {
+  background: var(--dm-info, #3b82f6);
+}
+
+.datametria-password-input__strength-fill--strong {
+  background: var(--dm-success, #10b981);
+}
+
+.datametria-password-input__strength-text {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  min-width: 4rem;
+}
+
+.datametria-password-input__strength-text--weak {
+  color: var(--dm-error, #ef4444);
+}
+
+.datametria-password-input__strength-text--medium {
+  color: var(--dm-warning, #f59e0b);
+}
+
+.datametria-password-input__strength-text--good {
+  color: var(--dm-info, #3b82f6);
+}
+
+.datametria-password-input__strength-text--strong {
+  color: var(--dm-success, #10b981);
+}
+
+.datametria-password-input__requirements {
+  padding: var(--dm-spacing-3, 0.75rem);
+  background: var(--dm-neutral-50, #f9fafb);
+  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-md, 0.375rem);
+}
+
+.datametria-password-input__requirements-title {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  color: var(--dm-neutral-700, #374151);
+  margin: 0 0 var(--dm-spacing-2, 0.5rem) 0;
+}
+
+.datametria-password-input__requirements-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-spacing-1, 0.25rem);
+}
+
+.datametria-password-input__requirements-list li {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-500, #6b7280);
+  display: flex;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.datametria-password-input__requirements-list li.valid {
+  color: var(--dm-success, #10b981);
+}
+
+.datametria-password-input__check {
+  font-weight: var(--dm-font-weight-semibold, 600);
+  min-width: 1rem;
+}
+
+.datametria-password-input__error {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-error, #ef4444);
+  margin: 0;
+}
+
+.datametria-password-input__help {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-500, #6b7280);
+  margin: 0;
+}
+</style>

package/src/components/DatametriaProgress.vue

@@ -46,7 +46,7 @@ const clampedValue = computed(() => {
 .dm-progress {
   display: flex;
   flex-direction: column;
-  gap: var(--dm-space-2);
+  gap: var(--dm-spacing-2, 0.5rem);
 }
 
 .dm-progress__header {
@@ -56,58 +56,58 @@ const clampedValue = computed(() => {
 }
 
 .dm-progress__label {
-  font-size: var(--dm-text-sm);
-  font-weight: 500;
-  color: var(--dm-text-primary);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  color: var(--dm-neutral-900, #111827);
 }
 
 .dm-progress__value {
-  font-size: var(--dm-text-sm);
-  font-weight: 600;
-  color: var(--dm-text-secondary);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+  color: var(--dm-neutral-600, #4b5563);
 }
 
 .dm-progress__track {
   width: 100%;
   height: 8px;
-  background: var(--dm-gray-200);
-  border-radius: 4px;
+  background: var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-sm, 0.25rem);
   overflow: hidden;
 }
 
 .dm-progress__bar {
   height: 100%;
-  border-radius: 4px;
-  transition: width 0.3s ease;
+  border-radius: var(--dm-radius-sm, 0.25rem);
+  transition: width var(--dm-transition-base, 0.3s ease);
 }
 
 .dm-progress__bar--primary {
-  background: var(--dm-primary);
+  background: var(--dm-primary, #0072CE);
 }
 
 .dm-progress__bar--success {
-  background: var(--dm-success);
+  background: var(--dm-success, #10b981);
 }
 
 .dm-progress__bar--warning {
-  background: var(--dm-warning);
+  background: var(--dm-warning, #f59e0b);
 }
 
 .dm-progress__bar--error {
-  background: var(--dm-error);
+  background: var(--dm-error, #ef4444);
 }
 
 @media (prefers-color-scheme: dark) {
   .dm-progress__track {
-    background: var(--dm-gray-700);
+    background: var(--dm-neutral-700, #374151);
   }
 
   .dm-progress__label {
-    color: var(--dm-white);
+    color: var(--dm-neutral-50, #ffffff);
   }
 
   .dm-progress__value {
-    color: var(--dm-gray-400);
+    color: var(--dm-neutral-400, #9ca3af);
   }
 }
 </style>

package/src/components/DatametriaRadio.vue

@@ -49,16 +49,16 @@ const handleChange = () => {
 .dm-radio {
   display: flex;
   flex-direction: column;
-  gap: var(--dm-space-1);
+  gap: var(--dm-spacing-1, 0.25rem);
 }
 
 .dm-radio__label {
   display: inline-flex;
   align-items: center;
-  gap: var(--dm-space-2);
+  gap: var(--dm-spacing-2, 0.5rem);
   cursor: pointer;
   min-height: 44px;
-  padding: var(--dm-space-2);
+  padding: var(--dm-spacing-2, 0.5rem);
   user-select: none;
 }
 
@@ -78,16 +78,16 @@ const handleChange = () => {
   position: relative;
   width: 20px;
   height: 20px;
-  border: 2px solid var(--dm-gray-400);
+  border: 2px solid var(--dm-neutral-400, #9ca3af);
   border-radius: 50%;
-  background: var(--dm-white);
-  transition: var(--dm-transition);
+  background: white;
+  transition: all 0.2s;
   flex-shrink: 0;
 }
 
 .dm-radio__input:checked + .dm-radio__checkmark {
-  border-color: var(--dm-primary);
-  background: var(--dm-primary);
+  border-color: var(--dm-primary, #0072CE);
+  background: var(--dm-primary, #0072CE);
 }
 
 .dm-radio__input:checked + .dm-radio__checkmark::after {
@@ -99,40 +99,40 @@ const handleChange = () => {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--dm-white);
+  background: white;
 }
 
 .dm-radio__input:focus-visible + .dm-radio__checkmark {
-  outline: var(--dm-focus-ring);
+  outline: 2px solid var(--dm-primary, #0072CE);
   outline-offset: 2px;
 }
 
 .dm-radio__input:disabled + .dm-radio__checkmark {
-  background: var(--dm-gray-100);
-  border-color: var(--dm-gray-300);
+  background: var(--dm-neutral-100, #f3f4f6);
+  border-color: var(--dm-neutral-300, #d1d5db);
 }
 
 .dm-radio__text {
-  color: var(--dm-text-primary);
-  font-size: var(--dm-text-base);
+  color: var(--dm-neutral-900, #111827);
+  font-size: var(--dm-font-size-base, 1rem);
   line-height: 1.5;
 }
 
 .dm-radio__error {
-  color: var(--dm-error);
-  font-size: var(--dm-text-sm);
+  color: var(--dm-error, #ef4444);
+  font-size: var(--dm-font-size-sm, 0.875rem);
   margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
   .dm-radio__checkmark {
-    background: var(--dm-gray-800);
-    border-color: var(--dm-gray-600);
+    background: var(--dm-neutral-800, #1f2937);
+    border-color: var(--dm-neutral-600, #4b5563);
   }
 
   .dm-radio__input:disabled + .dm-radio__checkmark {
-    background: var(--dm-gray-900);
-    border-color: var(--dm-gray-700);
+    background: var(--dm-neutral-900, #111827);
+    border-color: var(--dm-neutral-700, #374151);
   }
 }
 </style>

package/src/components/DatametriaSelect.vue

@@ -66,24 +66,24 @@ const selectClasses = computed(() => [
 .datametria-select {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--dm-spacing-2, 0.5rem);
 }
 
 .datametria-select__label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #374151;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  color: var(--dm-neutral-700, #374151);
 }
 
 .datametria-select__required {
-  color: #ef4444;
+  color: var(--dm-error, #ef4444);
 }
 
 .datametria-select__field {
-  padding: 0.75rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  font-size: 1rem;
+  padding: var(--dm-spacing-3, 0.75rem);
+  border: 1px solid var(--dm-neutral-300, #d1d5db);
+  border-radius: var(--dm-radius-md, 0.375rem);
+  font-size: var(--dm-font-size-base, 1rem);
   background: white;
   cursor: pointer;
   transition: all 0.2s;
@@ -91,22 +91,22 @@ const selectClasses = computed(() => [
 
 .datametria-select__field:focus {
   outline: none;
-  border-color: #0072CE;
-  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
+  border-color: var(--dm-primary, #0072CE);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
 }
 
 .datametria-select__field--error {
-  border-color: #ef4444;
+  border-color: var(--dm-error, #ef4444);
 }
 
 .datametria-select__field--disabled {
-  background: #f3f4f6;
+  background: var(--dm-neutral-100, #f3f4f6);
   cursor: not-allowed;
 }
 
 .datametria-select__error {
-  font-size: 0.875rem;
-  color: #ef4444;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-error, #ef4444);
   margin: 0;
 }
 </style>