@datametria/vue-components 1.2.0 → 2.0.1

package/src/components/DatametriaSlider.vue

@@ -1,408 +1,396 @@
-<template>
-  <div class="dm-slider" :class="{ 'dm-slider--disabled': disabled }">
-    <div v-if="label || showValue" class="dm-slider__header">
-      <label v-if="label" :for="inputId" class="dm-slider__label">
-        {{ label }}
-        <span v-if="required" class="dm-slider__required" aria-label="obrigatório">*</span>
-      </label>
-      <span v-if="showValue" class="dm-slider__value">{{ displayValue }}</span>
-    </div>
-    
-    <div class="dm-slider__wrapper">
-      <div class="dm-slider__track" @click="handleTrackClick">
-        <div 
-          class="dm-slider__progress" 
-          :style="{ width: `${progressPercentage}%` }"
-        ></div>
-        <div 
-          class="dm-slider__thumb"
-          :style="{ left: `${progressPercentage}%` }"
-          @mousedown="handleMouseDown"
-          @touchstart="handleTouchStart"
-        ></div>
-      </div>
-      
-      <input
-        :id="inputId"
-        ref="inputRef"
-        type="range"
-        class="dm-slider__input"
-        :value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        :required="required"
-        :aria-label="ariaLabel"
-        :aria-describedby="ariaDescribedBy"
-        :aria-valuemin="min"
-        :aria-valuemax="max"
-        :aria-valuenow="modelValue"
-        :aria-valuetext="ariaValueText"
-        @input="handleInput"
-        @change="handleChange"
-        @focus="handleFocus"
-        @blur="handleBlur"
-      />
-    </div>
-    
-    <div v-if="showMinMax" class="dm-slider__range">
-      <span class="dm-slider__min">{{ formatValue(min) }}</span>
-      <span class="dm-slider__max">{{ formatValue(max) }}</span>
-    </div>
-    
-    <div v-if="errorMessage || helperText" class="dm-slider__messages">
-      <p v-if="errorMessage" :id="`${inputId}-error`" class="dm-slider__error" role="alert">
-        {{ errorMessage }}
-      </p>
-      <p v-else-if="helperText" :id="`${inputId}-helper`" class="dm-slider__helper">
-        {{ helperText }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
-
-interface Props {
-  modelValue: number
-  min?: number
-  max?: number
-  step?: number
-  label?: string
-  disabled?: boolean
-  required?: boolean
-  showValue?: boolean
-  showMinMax?: boolean
-  errorMessage?: string
-  helperText?: string
-  ariaLabel?: string
-  formatter?: (value: number) => string
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: number): void
-  (e: 'change', value: number): void
-  (e: 'input', value: number): void
-  (e: 'focus', event: FocusEvent): void
-  (e: 'blur', event: FocusEvent): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  min: 0,
-  max: 100,
-  step: 1,
-  showValue: true,
-  showMinMax: false
-})
-
-const emit = defineEmits<Emits>()
-
-// Refs
-const inputRef = ref<HTMLInputElement>()
-const isDragging = ref(false)
-
-// Computed
-const inputId = computed(() => `dm-slider-${Math.random().toString(36).substr(2, 9)}`)
-
-const progressPercentage = computed(() => {
-  const range = props.max - props.min
-  const value = props.modelValue - props.min
-  return (value / range) * 100
-})
-
-const displayValue = computed(() => {
-  return props.formatter ? props.formatter(props.modelValue) : props.modelValue.toString()
-})
-
-const ariaDescribedBy = computed(() => {
-  const ids = []
-  if (props.errorMessage) ids.push(`${inputId.value}-error`)
-  else if (props.helperText) ids.push(`${inputId.value}-helper`)
-  return ids.length > 0 ? ids.join(' ') : undefined
-})
-
-const ariaValueText = computed(() => {
-  return props.formatter ? props.formatter(props.modelValue) : `${props.modelValue}`
-})
-
-// Methods
-const formatValue = (value: number): string => {
-  return props.formatter ? props.formatter(value) : value.toString()
-}
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  const value = parseFloat(target.value)
-  emit('update:modelValue', value)
-  emit('input', value)
-}
-
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  const value = parseFloat(target.value)
-  emit('change', value)
-}
-
-const handleFocus = (event: FocusEvent) => {
-  emit('focus', event)
-}
-
-const handleBlur = (event: FocusEvent) => {
-  emit('blur', event)
-}
-
-const handleTrackClick = (event: MouseEvent) => {
-  if (props.disabled) return
-  
-  const track = event.currentTarget as HTMLElement
-  const rect = track.getBoundingClientRect()
-  const percentage = (event.clientX - rect.left) / rect.width
-  const range = props.max - props.min
-  const newValue = props.min + (percentage * range)
-  const steppedValue = Math.round(newValue / props.step) * props.step
-  const clampedValue = Math.max(props.min, Math.min(props.max, steppedValue))
-  
-  emit('update:modelValue', clampedValue)
-  emit('change', clampedValue)
-}
-
-const handleMouseDown = (event: MouseEvent) => {
-  if (props.disabled) return
-  
-  isDragging.value = true
-  event.preventDefault()
-  
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!isDragging.value) return
-    
-    const track = (event.target as HTMLElement).parentElement
-    if (!track) return
-    
-    const rect = track.getBoundingClientRect()
-    const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-    const range = props.max - props.min
-    const newValue = props.min + (percentage * range)
-    const steppedValue = Math.round(newValue / props.step) * props.step
-    const clampedValue = Math.max(props.min, Math.min(props.max, steppedValue))
-    
-    emit('update:modelValue', clampedValue)
-    emit('input', clampedValue)
-  }
-  
-  const handleMouseUp = () => {
-    if (isDragging.value) {
-      isDragging.value = false
-      emit('change', props.modelValue)
-    }
-    document.removeEventListener('mousemove', handleMouseMove)
-    document.removeEventListener('mouseup', handleMouseUp)
-  }
-  
-  document.addEventListener('mousemove', handleMouseMove)
-  document.addEventListener('mouseup', handleMouseUp)
-}
-
-const handleTouchStart = (event: TouchEvent) => {
-  if (props.disabled) return
-  
-  isDragging.value = true
-  event.preventDefault()
-  
-  const handleTouchMove = (e: TouchEvent) => {
-    if (!isDragging.value) return
-    
-    const track = (event.target as HTMLElement).parentElement
-    if (!track) return
-    
-    const rect = track.getBoundingClientRect()
-    const touch = e.touches[0]
-    const percentage = Math.max(0, Math.min(1, (touch.clientX - rect.left) / rect.width))
-    const range = props.max - props.min
-    const newValue = props.min + (percentage * range)
-    const steppedValue = Math.round(newValue / props.step) * props.step
-    const clampedValue = Math.max(props.min, Math.min(props.max, steppedValue))
-    
-    emit('update:modelValue', clampedValue)
-    emit('input', clampedValue)
-  }
-  
-  const handleTouchEnd = () => {
-    if (isDragging.value) {
-      isDragging.value = false
-      emit('change', props.modelValue)
-    }
-    document.removeEventListener('touchmove', handleTouchMove)
-    document.removeEventListener('touchend', handleTouchEnd)
-  }
-  
-  document.addEventListener('touchmove', handleTouchMove)
-  document.addEventListener('touchend', handleTouchEnd)
-}
-
-const focus = () => {
-  nextTick(() => {
-    inputRef.value?.focus()
-  })
-}
-
-const blur = () => {
-  inputRef.value?.blur()
-}
-
-// Expose methods
-defineExpose({
-  focus,
-  blur,
-  inputRef
-})
-</script>
-
-<style scoped>
-.dm-slider {
-  @apply w-full;
-}
-
-.dm-slider--disabled {
-  @apply opacity-60 cursor-not-allowed;
-}
-
-.dm-slider__header {
-  @apply flex justify-between items-center mb-2;
-}
-
-.dm-slider__label {
-  @apply text-sm font-medium text-gray-700;
-  color: var(--dm-gray-700);
-}
-
-[data-theme="dark"] .dm-slider__label {
-  color: var(--dm-text-secondary);
-}
-
-.dm-slider__required {
-  @apply text-red-500 ml-1;
-  color: var(--dm-error);
-}
-
-.dm-slider__value {
-  @apply text-sm font-medium text-gray-900;
-  color: var(--dm-text-primary);
-}
-
-[data-theme="dark"] .dm-slider__value {
-  color: var(--dm-text-primary);
-}
-
-.dm-slider__wrapper {
-  @apply relative mb-2;
-}
-
-.dm-slider__track {
-  @apply relative h-2 bg-gray-200 rounded-full cursor-pointer;
-  background-color: var(--dm-gray-200, #e5e7eb);
-  border-radius: var(--dm-radius);
-}
-
-[data-theme="dark"] .dm-slider__track {
-  background-color: var(--dm-gray-600, #4b5563);
-}
-
-.dm-slider__progress {
-  @apply absolute top-0 left-0 h-full bg-blue-600 rounded-full transition-all duration-200;
-  background: var(--gradient-primary);
-  border-radius: var(--dm-radius);
-  transition: var(--dm-transition);
-}
-
-.dm-slider__thumb {
-  @apply absolute top-1/2 w-5 h-5 bg-white border-2 border-blue-600 rounded-full shadow-md cursor-grab;
-  @apply transform -translate-x-1/2 -translate-y-1/2 transition-all duration-200;
-  @apply hover:scale-110 focus:scale-110;
-  
-  background-color: var(--dm-bg-primary, #ffffff);
-  border-color: var(--dm-primary);
-  transition: var(--dm-transition);
-}
-
-.dm-slider__thumb:active {
-  @apply cursor-grabbing scale-110;
-}
-
-[data-theme="dark"] .dm-slider__thumb {
-  background-color: var(--dm-bg-primary);
-  border-color: var(--dm-primary);
-}
-
-.dm-slider__input {
-  @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
-  @apply focus:outline-none;
-}
-
-.dm-slider__input:focus + .dm-slider__track .dm-slider__thumb {
-  box-shadow: var(--dm-focus-ring);
-}
-
-.dm-slider__range {
-  @apply flex justify-between text-xs text-gray-500;
-  color: var(--dm-gray-500, #6b7280);
-}
-
-[data-theme="dark"] .dm-slider__range {
-  color: var(--dm-text-secondary);
-}
-
-.dm-slider__min,
-.dm-slider__max {
-  @apply select-none;
-}
-
-.dm-slider__messages {
-  @apply mt-1;
-}
-
-.dm-slider__error {
-  @apply text-sm text-red-600;
-  color: var(--dm-error);
-}
-
-.dm-slider__helper {
-  @apply text-sm text-gray-500;
-  color: var(--dm-gray-500, #6b7280);
-}
-
-[data-theme="dark"] .dm-slider__helper {
-  color: var(--dm-text-secondary);
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .dm-slider__track {
-    @apply border border-gray-400;
-  }
-  
-  .dm-slider__thumb {
-    @apply border-4;
-  }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .dm-slider__progress,
-  .dm-slider__thumb {
-    @apply transition-none;
-  }
-}
-
-/* Touch device optimizations */
-@media (pointer: coarse) {
-  .dm-slider__thumb {
-    @apply w-6 h-6;
-  }
-  
-  .dm-slider__track {
-    @apply h-3;
-  }
-}
+<template>
+  <div class="dm-slider" :class="{ 'dm-slider--disabled': disabled }">
+    <div v-if="label || showValue" class="dm-slider__header">
+      <label v-if="label" :for="inputId" class="dm-slider__label">
+        {{ label }}
+        <span v-if="required" class="dm-slider__required" aria-label="obrigatório">*</span>
+      </label>
+      <span v-if="showValue" class="dm-slider__value">{{ displayValue }}</span>
+    </div>
+    
+    <div class="dm-slider__wrapper">
+      <div class="dm-slider__track" @click="handleTrackClick">
+        <div 
+          class="dm-slider__progress" 
+          :style="{ width: `${progressPercentage}%` }"
+        ></div>
+        <div 
+          class="dm-slider__thumb"
+          :style="{ left: `${progressPercentage}%` }"
+          @mousedown="handleMouseDown"
+          @touchstart="handleTouchStart"
+        ></div>
+      </div>
+      
+      <input
+        :id="inputId"
+        ref="inputRef"
+        type="range"
+        class="dm-slider__input"
+        :value="modelValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        :required="required"
+        :aria-label="ariaLabel"
+        :aria-describedby="ariaDescribedBy"
+        :aria-valuemin="min"
+        :aria-valuemax="max"
+        :aria-valuenow="modelValue"
+        :aria-valuetext="ariaValueText"
+        @input="handleInput"
+        @change="handleChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+    </div>
+    
+    <div v-if="showMinMax" class="dm-slider__range">
+      <span class="dm-slider__min">{{ formatValue(min) }}</span>
+      <span class="dm-slider__max">{{ formatValue(max) }}</span>
+    </div>
+    
+    <div v-if="errorMessage || helperText" class="dm-slider__messages">
+      <p v-if="errorMessage" :id="`${inputId}-error`" class="dm-slider__error" role="alert">
+        {{ errorMessage }}
+      </p>
+      <p v-else-if="helperText" :id="`${inputId}-helper`" class="dm-slider__helper">
+        {{ helperText }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue'
+
+interface Props {
+  modelValue: number
+  min?: number
+  max?: number
+  step?: number
+  label?: string
+  disabled?: boolean
+  required?: boolean
+  showValue?: boolean
+  showMinMax?: boolean
+  errorMessage?: string
+  helperText?: string
+  ariaLabel?: string
+  formatter?: (value: number) => string
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: number): void
+  (e: 'change', value: number): void
+  (e: 'input', value: number): void
+  (e: 'focus', event: FocusEvent): void
+  (e: 'blur', event: FocusEvent): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  showValue: true,
+  showMinMax: false
+})
+
+const emit = defineEmits<Emits>()
+
+// Refs
+const inputRef = ref<HTMLInputElement>()
+const isDragging = ref(false)
+
+// Computed
+const inputId = computed(() => `dm-slider-${Math.random().toString(36).substr(2, 9)}`)
+
+const progressPercentage = computed(() => {
+  const range = props.max - props.min
+  const value = props.modelValue - props.min
+  return (value / range) * 100
+})
+
+const displayValue = computed(() => {
+  return props.formatter ? props.formatter(props.modelValue) : props.modelValue.toString()
+})
+
+const ariaDescribedBy = computed(() => {
+  const ids = []
+  if (props.errorMessage) ids.push(`${inputId.value}-error`)
+  else if (props.helperText) ids.push(`${inputId.value}-helper`)
+  return ids.length > 0 ? ids.join(' ') : undefined
+})
+
+const ariaValueText = computed(() => {
+  return props.formatter ? props.formatter(props.modelValue) : `${props.modelValue}`
+})
+
+// Methods
+const formatValue = (value: number): string => {
+  return props.formatter ? props.formatter(value) : value.toString()
+}
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = parseFloat(target.value)
+  emit('update:modelValue', value)
+  emit('input', value)
+}
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const value = parseFloat(target.value)
+  emit('change', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const handleTrackClick = (event: MouseEvent) => {
+  if (props.disabled) return
+  
+  const track = event.currentTarget as HTMLElement
+  const rect = track.getBoundingClientRect()
+  const percentage = (event.clientX - rect.left) / rect.width
+  const range = props.max - props.min
+  const newValue = props.min + (percentage * range)
+  const steppedValue = Math.round(newValue / props.step) * props.step
+  const clampedValue = Math.max(props.min, Math.min(props.max, steppedValue))
+  
+  emit('update:modelValue', clampedValue)
+  emit('change', clampedValue)
+}
+
+const handleMouseDown = (event: MouseEvent) => {
+  if (props.disabled) return
+  
+  isDragging.value = true
+  event.preventDefault()
+  
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging.value) return
+    
+    const track = (event.target as HTMLElement).parentElement
+    if (!track) return
+    
+    const rect = track.getBoundingClientRect()
+    const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+    const range = props.max - props.min
+    const newValue = props.min + (percentage * range)
+    const steppedValue = Math.round(newValue / props.step) * props.step
+    const clampedValue = Math.max(props.min, Math.min(props.max, steppedValue))
+    
+    emit('update:modelValue', clampedValue)
+    emit('input', clampedValue)
+  }
+  
+  const handleMouseUp = () => {
+    if (isDragging.value) {
+      isDragging.value = false
+      emit('change', props.modelValue)
+    }
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+  }
+  
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+}
+
+const handleTouchStart = (event: TouchEvent) => {
+  if (props.disabled) return
+  
+  isDragging.value = true
+  event.preventDefault()
+  
+  const handleTouchMove = (e: TouchEvent) => {
+    if (!isDragging.value) return
+    
+    const track = (event.target as HTMLElement).parentElement
+    if (!track) return
+    
+    const rect = track.getBoundingClientRect()
+    const touch = e.touches[0]
+    const percentage = Math.max(0, Math.min(1, (touch.clientX - rect.left) / rect.width))
+    const range = props.max - props.min
+    const newValue = props.min + (percentage * range)
+    const steppedValue = Math.round(newValue / props.step) * props.step
+    const clampedValue = Math.max(props.min, Math.min(props.max, steppedValue))
+    
+    emit('update:modelValue', clampedValue)
+    emit('input', clampedValue)
+  }
+  
+  const handleTouchEnd = () => {
+    if (isDragging.value) {
+      isDragging.value = false
+      emit('change', props.modelValue)
+    }
+    document.removeEventListener('touchmove', handleTouchMove)
+    document.removeEventListener('touchend', handleTouchEnd)
+  }
+  
+  document.addEventListener('touchmove', handleTouchMove)
+  document.addEventListener('touchend', handleTouchEnd)
+}
+
+const focus = () => {
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
+const blur = () => {
+  inputRef.value?.blur()
+}
+
+// Expose methods
+defineExpose({
+  focus,
+  blur,
+  inputRef
+})
+</script>
+
+<style scoped>
+.dm-slider {
+  @apply w-full;
+}
+
+.dm-slider--disabled {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+.dm-slider__header {
+  @apply flex justify-between items-center;
+  margin-bottom: var(--dm-spacing-2, 0.5rem);
+}
+
+.dm-slider__label {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  color: var(--dm-neutral-700, #374151);
+}
+
+.dm-slider__required {
+  color: var(--dm-error, #ef4444);
+  margin-left: var(--dm-spacing-1, 0.25rem);
+}
+
+.dm-slider__value {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-medium, 500);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.dm-slider__wrapper {
+  @apply relative;
+  margin-bottom: var(--dm-spacing-2, 0.5rem);
+}
+
+.dm-slider__track {
+  @apply relative cursor-pointer;
+  height: 0.5rem;
+  background-color: var(--dm-neutral-200, #e5e7eb);
+  border-radius: var(--dm-radius-full, 9999px);
+}
+
+.dm-slider__progress {
+  @apply absolute top-0 left-0 h-full;
+  background: var(--dm-primary, #0072CE);
+  border-radius: var(--dm-radius-full, 9999px);
+  transition: width 0.2s ease;
+}
+
+.dm-slider__thumb {
+  @apply absolute top-1/2 cursor-grab;
+  @apply transform -translate-x-1/2 -translate-y-1/2;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-color: var(--dm-neutral-50, #ffffff);
+  border: 2px solid var(--dm-primary, #0072CE);
+  border-radius: var(--dm-radius-full, 9999px);
+  box-shadow: var(--dm-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+  transition: transform 0.2s ease;
+}
+
+.dm-slider__thumb:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.dm-slider__thumb:active {
+  @apply cursor-grabbing;
+  transform: translate(-50%, -50%) scale(1.1);
+}
+
+.dm-slider__input {
+  @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
+  @apply focus:outline-none;
+}
+
+.dm-slider__input:focus ~ .dm-slider__track .dm-slider__thumb {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 20%, transparent);
+}
+
+.dm-slider__range {
+  @apply flex justify-between;
+  font-size: var(--dm-font-size-xs, 0.75rem);
+  color: var(--dm-neutral-500, #6b7280);
+}
+
+.dm-slider__min,
+.dm-slider__max {
+  @apply select-none;
+}
+
+.dm-slider__messages {
+  margin-top: var(--dm-spacing-1, 0.25rem);
+}
+
+.dm-slider__error {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-error, #ef4444);
+}
+
+.dm-slider__helper {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-500, #6b7280);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .dm-slider__track {
+    @apply border border-gray-400;
+  }
+  
+  .dm-slider__thumb {
+    @apply border-4;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .dm-slider__progress,
+  .dm-slider__thumb {
+    @apply transition-none;
+  }
+}
+
+/* Touch device optimizations */
+@media (pointer: coarse) {
+  .dm-slider__thumb {
+    @apply w-6 h-6;
+  }
+  
+  .dm-slider__track {
+    @apply h-3;
+  }
+}
 </style>