@datametria/vue-components 1.1.2 → 1.1.3

package/src/components/DatametriaSkeleton.vue

@@ -0,0 +1,240 @@
+<template>
+  <div 
+    class="datametria-skeleton"
+    :class="[
+      `datametria-skeleton--${variant}`,
+      { 'datametria-skeleton--animated': animated }
+    ]"
+    :style="skeletonStyle"
+    :aria-label="ariaLabel"
+    role="status"
+    aria-live="polite"
+  >
+    <div v-if="variant === 'text'" class="datametria-skeleton__text">
+      <div 
+        v-for="line in lines" 
+        :key="line"
+        class="datametria-skeleton__line shimmer"
+        :style="getLineStyle(line)"
+      ></div>
+    </div>
+    
+    <div v-else-if="variant === 'avatar'" class="datametria-skeleton__avatar shimmer"></div>
+    
+    <div v-else-if="variant === 'card'" class="datametria-skeleton__card">
+      <div class="datametria-skeleton__card-header shimmer"></div>
+      <div class="datametria-skeleton__card-content">
+        <div class="datametria-skeleton__line shimmer" style="width:100%"></div>
+        <div class="datametria-skeleton__line shimmer" style="width:80%"></div>
+        <div class="datametria-skeleton__line shimmer" style="width:60%"></div>
+      </div>
+    </div>
+    
+    <div v-else-if="variant === 'button'" class="datametria-skeleton__button shimmer"></div>
+    
+    <div v-else class="datametria-skeleton__custom shimmer"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type SkeletonVariant = 'text' | 'avatar' | 'card' | 'button' | 'custom'
+
+interface Props {
+  variant?: SkeletonVariant
+  width?: string | number
+  height?: string | number
+  lines?: number
+  animated?: boolean
+  ariaLabel?: string
+  lastLineWidth?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'text',
+  lines: 3,
+  animated: true,
+  ariaLabel: 'Carregando conteúdo...',
+  lastLineWidth: 75
+})
+
+// Computed
+const skeletonStyle = computed(() => {
+  const style: Record<string, string> = {}
+  
+  if (props.width) {
+    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
+  }
+  
+  if (props.height) {
+    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
+  }
+  
+  return style
+})
+
+const getLineStyle = (lineNumber: number) => {
+  // Use 100% for all lines except the last one
+  const isLastLine = lineNumber === props.lines
+  const width = isLastLine ? `${props.lastLineWidth}%` : '100%'
+  
+  return {
+    width,
+    marginBottom: lineNumber < props.lines ? '0.5rem' : '0'
+  }
+}
+</script>
+
+<style scoped>
+.datametria-skeleton {
+  @apply bg-gray-200 rounded;
+  background-color: var(--dm-gray-200, #e5e7eb);
+  border-radius: var(--dm-radius);
+}
+
+.datametria-skeleton--animated {
+  background: linear-gradient(90deg, 
+    var(--dm-gray-200, #e5e7eb) 25%, 
+    var(--dm-gray-100, #f3f4f6) 50%, 
+    var(--dm-gray-200, #e5e7eb) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer var(--shimmer-duration, 1.5s) ease-in-out infinite;
+}
+
+[data-theme="dark"] .datametria-skeleton {
+  background-color: var(--dm-gray-700, #374151);
+}
+
+[data-theme="dark"] .datametria-skeleton--animated {
+  background: linear-gradient(90deg, 
+    var(--dm-gray-700, #374151) 25%, 
+    var(--dm-gray-600, #4b5563) 50%, 
+    var(--dm-gray-700, #374151) 75%
+  );
+  background-size: 200% 100%;
+}
+
+/* Shimmer class for individual elements */
+.shimmer {
+  background: inherit;
+  animation: inherit;
+}
+
+/* Text variant */
+.datametria-skeleton--text {
+  @apply w-full;
+}
+
+.datametria-skeleton__text {
+  @apply space-y-2;
+}
+
+.datametria-skeleton__line {
+  @apply h-4 rounded;
+  background: inherit;
+  border-radius: var(--dm-radius);
+}
+
+/* Avatar variant */
+.datametria-skeleton--avatar {
+  @apply w-12 h-12 rounded-full;
+}
+
+.datametria-skeleton__avatar {
+  @apply w-full h-full rounded-full;
+  background: inherit;
+}
+
+/* Card variant */
+.datametria-skeleton--card {
+  @apply w-full p-4;
+}
+
+.datametria-skeleton__card-header {
+  @apply h-6 w-3/4 mb-4 rounded;
+  background: inherit;
+  border-radius: var(--dm-radius);
+}
+
+.datametria-skeleton__card-content {
+  @apply space-y-2;
+}
+
+.datametria-skeleton__card-content .datametria-skeleton__line {
+  background: inherit;
+}
+
+/* Button variant */
+.datametria-skeleton--button {
+  @apply h-10 w-24 rounded;
+}
+
+.datametria-skeleton__button {
+  @apply w-full h-full rounded;
+  background: inherit;
+  border-radius: var(--dm-radius);
+}
+
+/* Custom variant */
+.datametria-skeleton--custom {
+  @apply w-full h-4;
+}
+
+.datametria-skeleton__custom {
+  @apply w-full h-full rounded;
+  background: inherit;
+  border-radius: var(--dm-radius);
+}
+
+/* Shimmer animation */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .datametria-skeleton--animated {
+    animation: none;
+    background: var(--dm-gray-200, #e5e7eb);
+  }
+  
+  [data-theme="dark"] .datametria-skeleton--animated {
+    background: var(--dm-gray-700, #374151);
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .datametria-skeleton {
+    @apply border border-gray-400;
+  }
+  
+  [data-theme="dark"] .datametria-skeleton {
+    @apply border-gray-500;
+  }
+}
+
+/* Size variants */
+.datametria-skeleton--sm .datametria-skeleton__line {
+  @apply h-3;
+}
+
+.datametria-skeleton--lg .datametria-skeleton__line {
+  @apply h-5;
+}
+
+.datametria-skeleton--sm.datametria-skeleton--avatar {
+  @apply w-8 h-8;
+}
+
+.datametria-skeleton--lg.datametria-skeleton--avatar {
+  @apply w-16 h-16;
+}
+</style>

package/src/components/DatametriaSlider.vue

@@ -0,0 +1,408 @@
+<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;
+  }
+}
+</style>